title: Html edit page content
body: <p>I am new to html and css and found this sidebar example that I want to use. The problem is that the  content appears on all sidebar pages. </p>
  
  <p>How do I get content to my other pages?</p>
  
  <p>I can see that the web page changes to the different pages when I click on them. But the content is still the same. 
  I think that the  is wrong somehow, or that I have to create a class for every page but I don't know the syntax.</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-html lang-html prettyprint-override"><code>    &lt;head&gt;
      &lt;title&gt;OpereX Project&lt;/title&gt;
      &lt;style&gt;
      body 
      {
          font-family: "Lato", sans-serif;
      }
      
      .sidenav 
      {
          height: 100%;
          width: 160px;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #99ccff;
          overflow-x: hidden;
          padding-top: 20px;
      }
      
      .sidenav a 
      {
          padding: 6px 8px 6px 16px;
          text-decoration: none;
          font-size: 25px;
          color: black;
          display: block;
      }
      
      .sidenav a:hover 
      {
          color: #f1f1f1;
      }
      
      .main 
      {
          margin-left: 160px; /* Same as the width of the sidenav */
          font-size: 28px; /* Increased text to enable scrolling */
          padding: 0px 10px;
      }
      
      @media screen and (max-height: 450px) 
      {
          .sidenav {padding-top: 15px;}
          .sidenav a {font-size: 18px;}
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      
      &lt;div class="sidenav"&gt;
        &lt;a href="#about"&gt;About&lt;/a&gt;
        &lt;a href="#services"&gt;Services&lt;/a&gt;
        &lt;a href="#clients"&gt;Clients&lt;/a&gt;
        &lt;a href="#contact"&gt;Contact&lt;/a&gt;
      &lt;/div&gt;
      
      &lt;div class=main&gt;
        &lt;h2&gt;Project&lt;/h2&gt;
      &lt;/div&gt;
           
      &lt;/body&gt;
      &lt;/html&gt; </code></pre>
  </div>
  </div>
  </p>