foundation 5, li not correctly working inside side-nav class

Question

here is my code that I'm trying to fix, I want to display two links in a single line, link 2 and link 3 but for some reason it adds a <br/> and split it:

    <ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a> / <a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>

this is the css portion that define the side-nav class and how the <li> within it behaves, I could not find what is causing the unwanted <br/> in my code:

    .side-nav {
      display: block;
      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0.875rem 0; }
      .side-nav li {
        font-size: 0.875rem;
        font-weight: normal;
        margin: 0 0 0.4375rem 0; }
        .side-nav li a:not(.button) {
          color: #008CBA;
          display: block;
          margin: 0;
          padding: 0.4375rem 0.875rem; }
          .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
            background: rgba(0, 0, 0, 0.025);
            color: #1cc7ff; }
          .side-nav li a:not(.button):active {
            color: #1cc7ff; }
        .side-nav li.active > a:first-child:not(.button) {
          color: #1cc7ff;
          font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-weight: normal; }
        .side-nav li.divider {
          border-top: 1px solid;
          height: 0;
          list-style: none;
          padding: 0;
          border-top-color: #e6e6e6; }
        .side-nav li.heading {
          color: #008CBA;
          font-size: 0.875rem;
          font-weight: bold;
          text-transform: uppercase; }

Answer 1

You have .side-nav li a:not(.button) - display:block;, so each a tag "take" a whole line. You need to remove it, or change it display:inline-block;

.side-nav {
      display: block;
      font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
      list-style-position: outside;
      list-style-type: none;
      margin: 0;
      padding: 0.875rem 0; }
      .side-nav li {
        font-size: 0.875rem;
        font-weight: normal;
        margin: 0 0 0.4375rem 0; }
        .side-nav li a:not(.button) {
          color: #008CBA;
          /*display: block; commented this*/
          margin: 0;
          padding: 0.4375rem 0.875rem; }
          .side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus {
            background: rgba(0, 0, 0, 0.025);
            color: #1cc7ff; }
          .side-nav li a:not(.button):active {
            color: #1cc7ff; }
        .side-nav li.active > a:first-child:not(.button) {
          color: #1cc7ff;
          font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
          font-weight: normal; }
        .side-nav li.divider {
          border-top: 1px solid;
          height: 0;
          list-style: none;
          padding: 0;
          border-top-color: #e6e6e6; }
        .side-nav li.heading {
          color: #008CBA;
          font-size: 0.875rem;
          font-weight: bold;
          text-transform: uppercase; }

<ul class="side-nav">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a> / <a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>