title: Bootstrap header overlap main Body div for responsive web design
body: <p>I am using Bootstrap in ASP.net MVC 5 web application for responsive web design. My issue is I need to put image in header which is about width of 180px. but when i put image in header, it doesn't pushing down main body (next div) but overlap the information in body. I am struggling ... need help</p>
  
  <p><a href="http://getbootstrap.com/" rel="nofollow">http://getbootstrap.com/</a> </p>
  
  <pre><code>&lt;!--*************************** Header ***********************************--&gt;
  &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;!--@Html.ActionLink("Application name", "Home", "Dashboard", null, new { @class = "navbar-brand" })--&gt;
               &lt;!--&lt;a href="@Url.Action("Home", "Dashboard")" class="logo"&gt;&lt;/a&gt;--&gt;
              &lt;img src="~/ImagesAndIcons/Images/LCM.jpg" style="max-width:15%;height:auto;" /&gt;
          &lt;/div&gt;
          &lt;div class="navbar-collapse collapse"&gt;
             &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                  &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!--end header--&gt;
  
  &lt;div class="body-content"&gt;
  
      &lt;!--*************************** Main Body ***********************************--&gt;
  
      &lt;div id="body_main_wrapper"&gt;
          &lt;!--Functions Panel Wrapper (left-side)--&gt;
          &lt;div id="Functions_Panel_Wrapper"&gt;
              &lt;a&gt;functions lists.....&lt;/a&gt;
          &lt;/div&gt;
  
          &lt;!--Functions Page Wrapper (right-side)--&gt;
          &lt;div class="Function_Page_Wrapper"&gt;
              @RenderBody()
          &lt;/div&gt; &lt;!--end Function_Page_Wrapper--&gt;
  
      &lt;/div&gt; &lt;!--end body_main_wrapper--&gt;
  
          &lt;!--*************************** Footer ***********************************--&gt;
          &lt;div class="footer_wrapper"&gt;
              &lt;footer&gt;
                  &lt;div class="container"&gt;
                      &lt;div class="footer_Title_Wrapper"&gt;
                          &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
                      &lt;/div&gt; &lt;!--end footer_Title_Wrapper--&gt;
                  &lt;/div&gt; &lt;!--end container--&gt;
              &lt;/footer&gt;
          &lt;/div&gt;&lt;!--end footer_wrapper--&gt;
      &lt;/div&gt; &lt;!--end body-content--&gt;
  </code></pre>