title: Materialize CSS Sidenav and Content
body: <p>I'm using <code>Materialize CSS</code> to design my portfolio and having some issues now. The screenshot of what my website looks for now is this:</p>
  
  <p><a href="https://i.stack.imgur.com/ey5SV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ey5SV.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the About part is below the nav which is my problem. I want it to be moved to the right so that it can be seen. My code for now is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;!--Import Font awesome Icon Font--&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
      &lt;!--Import materialize.css--&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/&gt;
      &lt;link type="text/css" rel="stylesheet" href="css/style.css" /&gt;
      &lt;!--Let browser know website is optimized for mobile--&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;header&gt;
        &lt;ul id="staggered-list" class="side-nav fixed grey darken-4 blue-grey-text text-lighten-4 go"&gt;
          &lt;br /&gt;
          &lt;div style="text-align:center;" id="profilepic"&gt;
            &lt;img src="./images/robertsoriano.jpg" alt="" class="circle responsive-img" width="200"&gt; &lt;br /&gt;
            Robert Soriano
          &lt;/div&gt;
          &lt;br /&gt; &lt;br /&gt;
          &lt;li&gt;&lt;a  class="grey-text text-lighten-2" href="#"&gt;&lt;i class="fa fa-user fa-2x fa-fw"&gt;&lt;/i&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="links" class="pink-text lighten-2" href="#"&gt;&lt;i class="fa fa-terminal fa-2x fa-fw"&gt;&lt;/i&gt;Projects&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="links" class="green-text text-lighten-2" href="#"&gt;&lt;i class="fa fa-bar-chart fa-2x fa-fw"&gt;&lt;/i&gt;Skills&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="links" class="yellow-text text-lighten-2" href="#"&gt;&lt;i class="fa fa-graduation-cap fa-2x fa-fw"&gt;&lt;/i&gt;Education&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a id="links"class="blue-text text-lighten-2" href="#"&gt;&lt;i class="fa fa-code fa-2x fa-fw"&gt;&lt;/i&gt;Source Codes&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/header&gt;
      &lt;main&gt;
        &lt;div class="section"&gt;
          &lt;div class="container"&gt;
            &lt;div class="row"&gt;
              &lt;div class="col s12 m9"&gt;
                &lt;h1 class="header center-on-small-only"&gt;About&lt;/h1&gt;
                &lt;h4 class ="light red-text text-lighten-4 center-on-small-only"&gt;Learn about the Material Design and our Project Team.&lt;/h4&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;!--Import jQuery before materialize.js--&gt;
      &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function() {
        Materialize.fadeInImage('#profilepic');
        Materialize.showStaggeredList('#staggered-list');
        });
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>body {
      background-image: url("../images/small_steps.png");
      background-color: #cccccc;
  }
  
  .go a:before,
  .go a:after {
      display: inline-block;
      opacity: 0;
      -webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
      -moz-transition: -moz-transform 0.3s, opacity 0.2s;
      transition: transform 0.3s, opacity 0.2s;
  }
  
  .go a:before {
      margin-right: 10px;
      content: '[';
      -webkit-transform: translate(20px);
      -moz-transform: translate(20px);
      transform: translate(20px);
  }
  
  .go a:after {
      margin-left: 10px;
      content: ']';
      -webkit-transform: translate(-20px);
      -moz-transform: translate(-20px);
      transform: translate(-20px);
  }
  
  .go a:hover:before,
  .go a:hover:after,
  .go a:focus:before,
  .go a:focus:after {
      opacity: 1;
      -webkit-transform: translate(0px);
      -moz-transform: translate(0px);
      transform: translate(0px);
  }
  </code></pre>
  
  <p>Fiddle: <a href="https://jsfiddle.net/ugwwxk64/" rel="nofollow noreferrer">https://jsfiddle.net/ugwwxk64/</a></p>
  
  <p>Any help would be really much appreciated. Thank you.</p>