Adding margin-right % put last item in next row - html

Question

I've a set of links of my footer. I want to put some extra spacing between each other, but now last item goes to the next line.
I think is important to note that I'm using Bootstrap 4, and that the Left Col is set to col-md-8 so there is enough space for the links.
Codepen
https://codepen.io/anon/pen/GaaJRm
Demo
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><i class="fab fa-twitter footer_icons"></i></i></li>
<li><i class="fab fa-instagram footer_icons"></i></i></li>
<li><i class="fab fa-facebook-square footer_icons"></i></i></li>
<li><i class="fab fa-youtube footer_icons"></i></i></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>© 2019 StickersGallito</span>
Privacy & Terms
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

Yes. The Left Col is set to col-md-8 and there is enough space. But the ul tag, which is the parent of all the footer_nav_links has a smaller width. You can add width: 100% for the ul tag to make its width equal to that of its parent which will open up space for the footer tags.
Modified Codepen
https://codepen.io/anon/pen/BeeNzY