How do I add fixed sidenav padding to the content for desktop screens in Materializecss?

I currently have a basic outline, but when I reduce the width of the browser, the sidenav is covering the content and the "logo" in the navbar. Is it possible to give it a padding for desktop screens (not mobile though)?

Here is the fiddle - https://jsfiddle.net/v2h8pvxz/

<nav>
  <div class="container">
    <div class="nav-wrapper"><a href="#" class="brand-logo">Logo</a></div>
  </div>
  <ul class="right hide-on-med-and-down">
    <li><a href="#!" class="waves-effect">First Sidebar Link</a></li>
    <li><a href="#!" class="waves-effect">Second Sidebar Link</a></li>
    <li><a class="dropdown-button waves-effect" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    <ul id='dropdown1' class='dropdown-content'>
      <li><a href="#!">First</a></li>
      <li><a href="#!">Second</a></li>
      <li><a href="#!">Third</a></li>
      <li><a href="#!">Fourth</a></li>
    </ul>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
</nav>

<div class="row">
  <div class="col s12 m4 l3">
    <ul id="slide-out" class="side-nav fixed">
      <li><a class="waves-effect" href="#!">First Sidebar Link</a></li>
      <li><a class="waves-effect" href="#!">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect">Dropdown</a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="col s12 m8 l9">
    <h1>adsffadsadfsfdasadfsafds sadf sadf adfs </h1>
  </div>
</div>

Solution

I see that you are using the fixed SideNav. Did you also add the required padding to your content to offset it?

Assuming you have the common structure and your content is within your <main> tags, add this to your CSS file:

header, main, footer {
  padding-left: 240px;
}

@media only screen and (max-width : 992px) {
  header, main, footer {
    padding-left: 0;
  }
}

Here's an updated fiddle for clarity.

Notice that I added your content within the <main> tags.