Navbar Logo and brand link overlapping if they both get same class

     <a href="#!" class="brand-logo left">LOGO</a>  
        <ul class="left hide-on-med-and-down">

when give same direction class they overlap, better to be on the right or left of logo based on direction

[iNilo]

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="left hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
        </ul>
    </div>
</nav>

[doughballs]

This question is a little complex.

It’s important to understand that .brand-logo uses position:absolute - which means it gets taken out of the flow of the page. The ul links do not see it, so that is why they overlap. To them, it is not even there.

The best solution here is not to be adding inline margins - these values could change in future, if the font changes, or the letter spacing, or the site name - and then the spacing will be out.

Removing position:absolute from .nav-logo is one solution, and using floats on on the logo and the ul:

nav .brand-logo {
  position: relative;
}

https://codepen.io/doughballs/pen/gOayyyV

we put the logo back into the flow of the page, and then float both left.

It gets even more complex here. ul; by default is a block level element. If we take the float off, then it sits under the logo, under the nav! If we change to display:inline, it moves back up into the nav, but before the brand logo!

.left is a utility class - a simple helper to float something left or right. It is sometimes better not to use utility classes, and write css that takes complete control of the component. it is not great in this example to have multiple left classes. (We can achieve the same thing with css with fewer classes)