title: Navbar menu is getting emerged with the section content?
body: <p>I don't know what happened, the last icon-bar emerged with the section div.
  I use bootstrap V4, plus the content under the navbar won't move down when the navbar menu is active.<a href="https://i.stack.imgur.com/wxjpw.png" rel="nofollow noreferrer">the problem</a>
  the last icon-bar is not clickable.
  I tried changing the margin-too of the section but it didn't work.
  the H1 seems okay but when it comes to the chicken section, the opacity of the navbar menu seems to decrease. What's exactly the problem?
  here are my HTML and CSS code:</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>body {
      font-size:16px;
      margin:0;
  
  
    }
   h2{
      text-align: center;
   }
  
  #header-nav{
      background-color: #1111;
      height: 54px;
      border-radius: 0;
      border:0
    }
  
  .navbar-brand h1 {  
      font-family : 'helvitica' , serif ;
      color: black;
      font-size: 1.5em;
      font-weight: bold;
      text-transform: uppercase;
      position:left;
  
   }
  .container-fluid{
      margin: 0;
  
  }
  
   h1{
   position: relative;
   margin-left: 1px;
   margin-top: -2px;
   margin-bottom: 2px;
   }
  
   a {
      text-decoration-line: none;
   }
   .navbar-brand a:hover, .navnar-brand a:focus {
      text-decoration:none;
   }
   #nav-list {
      margin-top:10px; 
      background-color:white;
  
  
   
   }
   #nav-list a{
      color: black;
      text-align: center;
      font-weight: bold;
      border: 1px solid black;
   }
   #nav-list a:hover {
      background: #575757;
   }
  
  
   .navbar-header button.navbar-toggle, .navbar-header .icon-bar {
      border: 1px solid black;
      
   }
  
   section {
      box-sizing: border-box;
      padding: 5px;
      width:100%;
      height: 1000px;
      margin:20px;
      margin-left:0px;
      margin-right: 0px;
      margin-top: 10px;
      border: 2px solid black;
      position:relative;
      background-color: #9999;
      padding-left: 5px;
      padding-top: 10px;
  
        }
  #chicken {
      text-align: center;
      font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewpoint" content="width=device-width , initial-scale=1"&gt;
  
      &lt;title&gt; Assignement solution for module 3&lt;/title&gt;
      &lt;link rel="stylesheet" href="bootstrap.css"&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="llstylesheet.css"&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav id="header-nav" class="navbar navbar-default"&gt;
              &lt;div class="container"&gt; 
                &lt;div class="navbar-header"&gt;
                        &lt;div class="navbar-brand"&gt;
        &lt;a href="llindex.html"&gt;
                      &lt;h1&gt; food, llc &lt;/h1&gt;
                  &lt;/a&gt;
                &lt;/div&gt;
                &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
    &lt;/div&gt;
  
  
      &lt;div class="collapse navbar-collapse" id="collapsable-nav"&gt;
        &lt;ul id="nav-list" class="nav navbar-nav navbar-right"&gt;
         &lt;li class="visible-xs"&gt;
                 &lt;a href="#"&gt;menu&lt;/a&gt;
  
         &lt;/li&gt;
  
               &lt;li class="visible-xs"&gt;
  
                 &lt;a href="#"&gt;hhhhhhh&lt;/a&gt;
  
         &lt;/li&gt;
  
               &lt;li class="visible-xs active"&gt;
  
                 &lt;a href="#"&gt;hhhhhhh&lt;/a&gt;
          
  
         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  
      &lt;/header&gt;
      
      &lt;h2&gt;
          &lt;p class="text-center"&gt; Our menu&lt;/p&gt;
      &lt;/h2&gt;
    
      &lt;div class="container-fluid"&gt;
          &lt;div  class=" col-xs-12"&gt;
                  &lt;section id="section1"&gt;
                  &lt;div id="chicken"&gt; Chicken &lt;/div&gt;
                  &lt;p &gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  &lt;/p&gt;
              &lt;/section&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script type="js/script.js"&gt;&lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>