title: How to fix links breaking out of line in responsive mode?
body: <p>On my custom shopify site when the main menu is in responsive mode, the links get all wonky and out of line, but only in a short area that seems to be random depending on browser.</p>
  
  <p><em>Here is how they are supposed to look:</em></p>
  
  <p><a href="https://i.stack.imgur.com/lRnWu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lRnWu.png" alt="enter image description here"></a></p>
  
  <p><em>Here is how they look when they are breaking:</em></p>
  
  <p><a href="https://i.stack.imgur.com/UX4nT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UX4nT.png" alt="enter image description here"></a></p>
  
  <p>According to all of the responsive code, they are set up all the same. </p>
  
  <p>Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>li a {
    display: block;
    padding: 7px 10px !important;
    text-align: left !important;
  }
  li ul li:first-child {
    display: none !important;
  }
  li ul li {
    font-size: 13px !important;
    clear: left !important;
    text-align: left !important;
    display: block !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;li class="site-nav--has-dropdown" aria-haspopup="true"&gt;
    &lt;a href="/pages/studios" class="site-nav__link"&gt;
               STUDIOS
               &lt;span class="icon icon-arrow-down" aria-hidden="true"&gt;&lt;/span&gt;
           &lt;/a&gt;
    &lt;ul class="site-nav__dropdown"&gt;
      &lt;div&gt;
        &lt;li&gt;
          &lt;a href="/pages/studios" class="site-nav__link "&gt;STUDIOS&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/pages/locations" class="site-nav__link "&gt;LOCATIONS&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/pages/class-schedule" class="site-nav__link "&gt;UPCOMING CLASSES&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="https://yogavida-dev.myshopify.com/pages/studios#schedule" class="site-nav__link "&gt;EVENTS&lt;/a&gt;
        &lt;/li&gt;
      &lt;/div&gt;
      &lt;span class="arrow"&gt;&amp;nbsp;&lt;/span&gt;
    &lt;/ul&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>