title: 3 divs inside container div do not allow wrapping
body: <p>I have 3 div's inside a container div for a fixed top navbar, how can I stop one div from sliding underneath another, which makes the nav bar taller. Here is my code, its using bootstrap. Essentially the navbar-header div is sliding underneath the header-full-title div, i want it to force it to resize since its an img-responsive.</p>
  
  <pre><code> &lt;nav class="navbar navbar-default navbar-fixed-top navbar-header-full"&gt;
          &lt;div class="container"&gt;
                  &lt;div class="header-full-title img-responsive"&gt;
                      &lt;img src="~/Content/img/MTC_logo_header.png" class="img-responsive" /&gt;
                  &lt;/div&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&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;a class="navbar-brand" href="#"&gt;
                          &lt;img src="~/Content/img/MTC_logo_header.png" class="img-responsive" alt=""&gt;
                      &lt;/a&gt;*@
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
  
  
                      &lt;ul class=" nav navbar-nav navbar-right"&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;OUR STORY&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;VISIT&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;DIRECTORY&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;CONDOS&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;APARTMENTS&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="dropdown"&gt;
                              &lt;a href="#" class="navStyle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;EVENTS&lt;/a&gt;
                              &lt;ul class="dropdown-menu dropDownMTC pull-right"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;YOGA ROCKS THE PARK&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;MONDAY NIGHT MOVIES&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;HORSES OF HONOR&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;THURSDAY IN THE PARK&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;EVENT SHUTTLE&lt;/a&gt;&lt;/li&gt;
                                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;HOLIDAY LIGHTS FESTIVAL&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" class="navStyle"&gt;NEWS&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/nav&gt;
  </code></pre>
  
  <h2>CSS</h2>
  
  <pre><code>       .header-full-title {
         float: left;
         padding-left: 20px;
  
  
           }
  </code></pre>