title: Prevent H1 tag from breaking to new line
body: <p>I am creating a dynamic web page using foundation. Everything transitions flawlessly to phones and tablets. However, I have creating this on a 1920 x 1080 monitor. And when I tested it on a  1280 x 1024 monitor, my H1 logo and h2 tagline broke. </p>
  
  <p>Im not sure how to fix this. Here is my CSS and HTML. </p>
  
  <pre><code>    /*Header*/
  
  #Header{
       max-height:106px;
       min-height:105px;
       background-color:#666666;
       border-bottom-width:3px;
       border-bottom-style:solid;
       border-bottom-color:white;
  
  
  }
  
  #logo{
  
      max-height:106px;
  
      border-right-width:3px;
      border-right-style:solid;
      border-right-color:white;
      line-height:none;
      text-align:center;
      background-color:#f58026;
  }
  
  #logo h1{
      margin-top:10px;
      font-weight:400;
      font-family:'Gill Sans MT';
      font-size:2em;
      margin-bottom:0px;
  }
  
  #logo h2{
  
      margin-top:0px;
      font-weight:500;
      font-family:'Myriad Pro' ,Arial;
      font-style:italic;
      color:white;
      font-size:1em;
      padding-bottom:15px;
  }
  
  &lt;div class="row collapse" id="voipHeader"&gt;
  
      &lt;!--Logo--&gt;
      &lt;div id="logo" class="large-2 columns small-12 columns"&gt;
          &lt;h1&gt;&lt;/h1&gt;
  
          &lt;h2&gt;Your Premier &lt;/h2&gt;
      &lt;/div&gt;
  
        &lt;!--Navigation--&gt;
      &lt;div id="navigation" class="large-10 columns small-12 columns"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Inquiry Form&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;&lt;!--End Row--&gt;
  </code></pre>