Добавление маржи-справа% поместит последний элемент в следующую строку

Question

У меня есть набор ссылок моего нижнего колонтитула.Я хочу добавить некоторый дополнительный интервал между собой, но теперь последний элемент переходит на следующую строку.

Я думаю, важно отметить, что я использую Bootstrap 4 и что для левой колонки установлено значение col-md-8 так что места для ссылок достаточно.

Codepen

https://codepen.io/anon/pen/GaaJRm

Демо

ul>li {
  display: inline-block;
  /* You can also add some margins here to make it look prettier */
  zoom: 1;
  *display: inline;
  /* this fix is needed for IE7- */
}

.footer_text {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .2em;
  padding: 0px;
  margin: 0px;
}

.footer_nav_links {
  margin-right: 2%;
}

.footer_icons {
  font-size: 18px;
  color: grey;
}

<div id="footer-navbar" class="container-fluid footer_text">
  <div id="footer-navbar" class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2 ">
    <div class="col-md-8">
      <div class="">

        <nav class="">
          <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">

            <ul class="">
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
              </li>
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
              </li>
              <li class="footer_nav_links">
                <a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
              </li>
            </ul>

          </div>
        </nav>

        <ul class="left footer-links footer-interact hidden-md-down">
          <li><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter footer_icons"></i></i></a></li>
          <li><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram footer_icons"></i></i></a></li>
          <li><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square footer_icons"></i></i></a></li>
          <li><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube footer_icons"></i></i></a></li>
        </ul>
      </div>

    </div>

    <div class="col-md-4 text-right">

      <div class="">
        <p><img src="{% static 'img/home/peru-flag.png' %}" width="40px" height="40px">Perú</p>
      </div>

      <div class="right footer-legal">
        <span>&copy; 2019 StickersGallito</span>
        <a href="/legal/privacy">Privacy</a> &amp; <a href="/legal/terms">Terms</a>

      </div>

    </div>
  </div>
</div>

</div>
</div>

Answer 1

Да.Левый столбец установлен на col-md-8 и места достаточно.Но тег ul, который является родителем всех footer_nav_links, имеет меньшую ширину.Вы можете добавить width: 100% для тега ul, чтобы сделать его ширину равной ширине его родительского элемента, что откроет пространство для тегов нижнего колонтитула.

Модифицированный Codepen https://codepen.io/anon/pen/BeeNzY