title: Navbar interfering with content
body: <p>I'm currently working on my first website, also I'm still new to HTML and CSS, so sorry if the code is a bit &quot;sloppy&quot;. Anyways I made a navbar that works in the home page ( it has an image background ). I found online &quot;about&quot; page code that I found helpful, so I used it, the problem it that the navbar interfers with it and makes it weird.</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-css lang-css prettyprint-override"><code>*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  .body{
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f1f1f1;
  }
  .header{
      width: 100%;
      background-color: rgba(0,0,0,0.9);
  
  }
  .header ul{
      text-align: center;
  }
  .header ul li{
      list-style: none;
      display: inline-block;
  }
  .header ul li a{
      display: flex;
      text-decoration: none;
      text-transform: uppercase;
      color:white;
      font-size: 100%;
      letter-spacing: 2px;
      font-weight: 600;
      padding: 25px;
      transition: width .3s;
  }
  .about{
      background: url("/images/Industrial2.jpg") no-repeat left;
      background-size: 55%;
      background-color: #fdfdfd;
      overflow: hidden;
      padding: 100px 0;
  }
  .inner-section{
      width: 55%;
      float: right;
      background-color: #fdfdfd;
      padding: 140px;
      box-shadow: 10px 10px 8px rgba(0,0,0,0.3);
  }
  .inner-section h1{
      margin-bottom: 30px;
      font-size: 30px;
      font-weight: 900;
  }
  .text{
      font-size: 13px;
      color: #545454;
      line-height: 30px;
      text-align: justify;
      margin-bottom: 40px;
  }
  .skills button{
      font-size: 22px;
      text-align: center;
      letter-spacing: 2px;
      border: none;
      border-radius: 20px;
      padding: 8px;
      width: 200px;
      background-color: #00999c;
      color: white;
      cursor: pointer;
  }
  .skills button:hover{
      transition: 1s;
      background-color: #ecf5f5;
      color: #00999c;
  }
  @media screen and (max-width:1200px){
      .inner-section{
          padding: 80px;
      }
  }
  @media screen and (max-width:1000px){
      .about{
          background-size: 100%;
          padding: 100px 40px;
      }
      .inner-section{
          width: 100%;
      }
  }
  
  @media screen and (max-width:600px){
      .about{
          padding: 0;
      }
      .inner-section{
          padding: 60px;
      }
      .skills button{
          font-size: 19px;
          padding: 5px;
          width: 160px;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;About&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="test.css"&gt;
      
  &lt;/head&gt;
  &lt;div class="header"&gt;&lt;/div&gt;
  &lt;body&gt;
      &lt;div class="about"&gt;
          &lt;div class="inner-section"&gt;
              &lt;div class="header"&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Projects&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="body"&gt;
              &lt;h1&gt;About Us&lt;/h1&gt;
              &lt;p class="text"&gt;
                  Lorem ipsum dolor sit amet consectetur adipisicing elit.
                  Doloribus velit ducimus, enim inventore earum, eligendi
                  nostrum pariatur necessitatibus eius dicta a voluptates sit
                  deleniti autem error eos totam
                  nisi neque voluptates sit deleniti autem error eos totam nisi neque.
              &lt;/p&gt;
              &lt;div class="skills"&gt;
                  &lt;button&gt;Contact Us&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/ZKKkO.jpg" rel="nofollow noreferrer">enter image description here</a></p>