How do I add fixed sidenav padding to the content for desktop screens in Materializecss?
<p>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)?</p>

<p>Here is the fiddle - <a href="https://jsfiddle.net/v2h8pvxz/" rel="nofollow">https://jsfiddle.net/v2h8pvxz/</a></p>

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

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