title: How to add nav bar on top of Image with white background
body: <p>I am adding nav bar on top of image. Nav bar has white background with logo pic left side and other content on right side. But looks like nav bar is not taking 100% width. If I increase width it is not  woking. I added all bootstrap link to make it responsive.</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>.main{
        position: relative;
          
      }
      .topNav{
          position: absolute;
         width:100%;
         
      }
      
      li{
          float: left;
          padding: 20px;
          background-color: aliceblue;
          height: 100px;
        list-style-type: none;
      }
      .topImg{
          position: absolute;
          top:100px;
      }
      .logo{
          float: left;
      }   
  }
  
  &lt;body&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          
          &lt;div class="col-sm-12"&gt;
              &lt;div class="main text-center"&gt;
                   &lt;div class="topNav"&gt;
                      &lt;ul&gt;
                           &lt;li class="logo"&gt;&lt;img src="https://i2.wp.com/riverviewramslacrosse.com/wp-content/uploads/img-header-logo.png?fit=204%2C202"&gt;&lt;/li&gt;
                           &lt;li&gt; Home&lt;/li&gt;
                           &lt;li&gt;About&lt;/li&gt;
                           &lt;li&gt; Contact&lt;/li&gt;
                           &lt;li&gt; Apply&lt;/li&gt;   
                    &lt;/ul&gt;
                  &lt;/div&gt;
                  
                  &lt;div class="topImg text-center"&gt;
                      &lt;img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" class="img-responsive img-center image-fluid" alt="officeImg"&gt;
                  &lt;/div&gt;
             
              &lt;/div&gt;
         
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;``    
      
  &lt;/body&gt; 
  
   </code></pre>
  </div>
  </div>
  </p>