title: Text inside li navigation bar on two lines in Chrome/ Safari but one line in Firefox
body: <p>I'm not sure why, but past a certain font size the text inside my navigation bar shows up on two lines. The box size isn't being updated for some reason in Chrome and Safari but still works fine in Firefox.</p>
  
  <p><a href="https://i.stack.imgur.com/l84Vr.png" rel="nofollow noreferrer">Firefox</a></p>
  
  <p><a href="https://i.stack.imgur.com/RXGJe.png" rel="nofollow noreferrer">Chrome</a></p>
  
  <p>What would be the difference between these web browsers that would have such an effect on my code?</p>
  
  <pre><code>&lt;nav id="topTab"&gt;
      &lt;a href="#" id="mobNav"&gt;&lt;/a&gt;
        &lt;ul&gt;
            &lt;li&gt;&lt;a href="http://www.example.org/" title="morning delight"&gt;page1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.example.org/" title="yesterday"&gt;page2&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="http://www.example.org/" title="accelaaaa"&gt;page3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
    &lt;div&gt;
        &lt;h1&gt;
        &lt;b href="http://localhost:8000/home.html" title="Home"&gt;Example1&lt;/b&gt;&lt;/h1&gt; 
    &lt;/div&gt;
  
  &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@media only screen and (min-width : 1024px) {
  
  a {
  background: #fcfcfc;
  color: #000;
  text-align: center;
  text-decoration: none;
  font-family: 'Gloria Hallelujah';
  }
  
  #topTab{
  position:relative;
  }
  
  nav#topTab {
      float: left;
      width: 100%;
      overflow: hidden;
  }
  
  nav#topTab ul {
      float: left;
      clear: left;
      position: relative;
      list-style: none;
      margin: 0;
      padding: 0;
      left: 50%;
  }
  
  nav#topTab ul li {
      display: block;
      float: left;
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
      right: 50%;
  }
  
  nav#topTab ul li a {
      display: block;
      padding: 0 5% 0 5%;
      margin: 0 15% 0 3%;
      font-size: 2.2em;
  }
  
  nav#topTab ul li a:hover {
      background: #000;
      color: #fff;
  } 
  
  h1 {
  position: relative;
  text-align: center;
  top: 20%;
  }
  
  h1 b {
      font-size: 2.3em;
  text-decoration: none;
  color: black;
  font-weight: bold;
  font-family: 'Caveat Brush';
  }
  }
  </code></pre>