title: Sidebar not appearing
body: <p>Hi my sidebar is not appearing when I click on the toggle button. I see it moving to the side but the sidebar is blank/transparent. 
  I think it has something to do with my js file. 
  Could someone help me out I am fairly new to coding and this community. 
  Thanks in advance !!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
  function openNav() {
      document.getElementById("mysidebar").style.width = "250px";
      document.getElementById("main").style.marginLeft = "250px";
  }
  
  
  /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
  function closeNav() {
      document.getElementById("mysidebar").style.width = "0";
      document.getElementById("main").style.marginLeft = "0";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
  
      &lt;section id="mysidebar"&gt;
          &lt;div class="sidebar"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()"&gt;&amp;times;&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Chapter 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Chapter 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Chapter 3&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Chapter 4&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Chapter 5&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div id="main"&gt;
              &lt;button class="openbtn" onclick="openNav()"&gt;&amp;#9776;&lt;/button&gt;
              &lt;h2&gt;Collapsed Sidebar&lt;/h2&gt;        
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;script src="C:\Users\quinc\Documents\Developer\Project 2.0\js\members.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>has something to do with my js script. I can't figure out the problem. </p>
  
  <p>Could someone help me out, I am new to coding and it's my first project I am working on. 
  I have placed my HTML, CSS and JS code down below.</p>
  
  <p>Thank you</p>