title: css responsive design - links flowing outside of div
body: <p>I am trying to make an existing website responsive.  I have an issue when the browser window gets to a certain size the links within the containing div start flowing outside of the div.  If I remove the ".main_navigation a {white-space:nowrap;}" its ok but I need this to stop owrd going on new lines. Any suggestions?</p>
  
  <pre><code> .search {width:260px;height:30px;padding:10px 0 0 10px;text-align:left;float:left;}
      .main_navigation {width:700px;min-height:20px;padding:10px 10px 10px 0;text-align:right;float:left;}.main_navigation a {font:10px/20px Tahoma, sans-serif;padding:4px 8px;text-decoration:none;color:#999999;border-radius:5px;-moz-border-radius:5px;}.main_navigation a:hover {color:#eeeeee;background:#999999;}
  
  @media screen and (max-width: 580px){
      .c_main {border:2px solid blue;max-width:580px}
      .search_button {padding:3px 1px;}
      .main_navigation {width:50%;}   
  }
  
  @media screen and (max-width: 980px){
      .search {width:28%;}
      .main_navigation {width:70%;padding-left:0;padding-right:0;margin-right:0;float:right;} 
      .main_navigation a {white-space:nowrap;}
  }
      &lt;div class="search"&gt;
              &lt;form method="get"&gt;&lt;input id="txtQuickSearch" name="txtQuickSearch" type="text" value="search"  /&gt;&lt;input type="submit" value="search" class="search_button" /&gt;&lt;/form&gt;
      &lt;/div&gt;
      &lt;a HREF="#"&gt;&lt;span CLASS="icon-menu-2"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;div class="main_navigation"&gt;
              &lt;a href="" title="Home"&gt;Home&lt;/a&gt;&lt;a href="" &gt;About&lt;/a&gt;&lt;a href=""&gt;Basket&lt;/a&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;a href=""&gt;new page&lt;/a&gt;
  
      &lt;a href="" target="_blank"&gt;test external links&lt;/a&gt;&lt;a href="" target="_blank"&gt;another link&lt;/a&gt;
  
      &lt;a href=""&gt;My Account&lt;/a&gt;&lt;a href=""&gt;Sign In&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>