title: CSS navbar background showing up as white instead of transparent
body: <p>My navbar background keeps showing up as white instead of transparent no matter what I do.</p>
  <p>CSS</p>
  <pre><code>body{
      margin: 0;
      line-height: 1.5;
      font-size: 16px;
  }
  
  *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }
  
  a{
      text-decoration: none;
  }
  
  :before,:after{
      box-sizing: border-box;
  }
  
  img{
      max-width: 100%;
      vertical-align: middle;
  }
  
  .container{
      max-width: 1140px;
      margin: auto;
      margin-left: 10%;
  }
  
  header,
  section,
  footer{
      display: block;
      width: 100%;
  }
  
  .row{
      display: flex;
      flex-wrap: wrap;
  }
  
  .justify-content-between{
      justify-content: space-between;
  }
  
  .align-items-center{
      align-items: center;
  }
  
  .header .logo{
      padding: 0 15px;
      width: 125px;
      height: auto;
  }
  
  .header .nav{
      padding: 0 15px;
  }
  
  .header .nav ul{
      list-style: none;
      margin: 0;
      padding: 0;
  }
  
  .header .nav ul li{
      display: inline-block;
      margin-left: 30px;
  }
  
  .header .nav ul li a{
      display: block;
      padding: 25px 50px;
      font: 18px sans-serif;
      color: #5D5D5D;
  }
  
  .home-section{
      min-height: 100vh;
      background-color: gray;
  }
  
  .home-section .row{
      min-height: 100vh;
  }
  
  .home-section .slide{
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
      position: relative;
      z-index: 1;
  }
  
  .home-section .slide:before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.7);
  }
  </code></pre>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
      &lt;title&gt;Neil O'Mara | Portfolio&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header class=&quot;header&quot;&gt;
          &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;row align-items-center justify-content-between&quot;&gt;
                  &lt;div class=&quot;logo&quot;&gt;
                      &lt;a href=&quot;index.html&quot;&gt;&lt;img src=&quot;/logo.png&quot; alt=&quot;logo&quot;&gt;&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;nav&quot;&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;index.html&quot;&gt;HOME&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;bio.html&quot;&gt;BIO&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;portfolio.html&quot;&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;resume.html&quot;&gt;RESUME&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
      &lt;section class=&quot;home-section&quot;&gt;
          &lt;div class=&quot;slide&quot; style=&quot;background-image: url('bimg1.jpg');&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>