title: CSS Columns not aligned in Safari
body: <p>I’m using CSS columns to get a multi-column main-navigation on my website (www.alexanderschlosser.de/wordpress – built using Semplice). Everything works great in Chrome, but the top of the columns are not correctly aligned in Safari. Any idea what might cause the issue? _</p>
  
  <p>Here’s how it looks in Chrome and should look everywhere: 
  <a href="https://i.stack.imgur.com/aOWgh.png" rel="nofollow noreferrer">Chrome Rendering</a></p>
  
  <p>And here’s how it looks in Safari (second columns begins to low): 
  <a href="https://i.stack.imgur.com/Tnq0F.png" rel="nofollow noreferrer">Safari Rendering</a></p>
  
  <p>What’s even weirder: Safari still seems to think that the elements are all underneath each other when I use the inspector. Could this be the problem?
  <a href="https://i.stack.imgur.com/UfHnT.png" rel="nofollow noreferrer">Safari Inspector Screenshot</a></p>
  
  <p>_</p>
  
  <p>Here’s my CSS</p>
  
  <pre><code>/***VERTICAL MENU IN TWO COLUMNS***/
  nav.standard ul {
      display: block !important; 
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      height: 100px !important;
  }
  
  /***DISTANCE BETWEEN MENU ELEMENTS***/
  nav.standard ul li {
      padding-bottom: 15px !important;
  }
  
  /***STYLING MENU ITEMS***/
  .navPrimary a {
      background-image: linear-gradient(to bottom, #252526, #252526);
      background-position: left 0 bottom 0;
      background-repeat: repeat-x;
      background-size: 2px 1px;
  }
  </code></pre>
  
  <p>And my HTML simplified</p>
  
  <pre><code>&lt;nav class="standard"&gt;
      &lt;ul class="menu"&gt;
          &lt;li class="navPrimary"&gt;
              &lt;a href="http://www.alexanderschlosser.de/wordpress/"&gt;&lt;span&gt;All Projects&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="navPrimary"&gt;
              &lt;a target="_blank" href="http://blog.alexanderschlosser.de"&gt;&lt;span&gt;Blog →&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="navPrimary"&gt;
              &lt;a href="http://www.alexanderschlosser.de/wordpress/about"&gt;&lt;span&gt;About Me&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="navInactive"&gt;
              &lt;a href="http://www.alexanderschlosser.de"&gt;&lt;span&gt;Alexander Schlosser&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="navSecondary“&gt;
              &lt;a href="mailto:mail@alexanderschlosser.de"&gt;&lt;span&gt;mail@alexanderschlosser.de →&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="navSecondary"&gt;
              &lt;a target="_blank" href="tel:004917657807152"&gt;&lt;span&gt;0049 176 57 80 71 52 →&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>_</p>
  
  <p>Many thanks in advance and all the best from Switzerland! Alex</p>