Currently undergoing the process of transitioning from Bootstrap 3.3 to 4.1, I find myself faced with two final complications. In Bootstrap 3.3, I had a responsive navbar without branding, where the links were evenly spaced. While I have managed to get my links looking right, they are now clustered in two rows on the far left side. I have tried various solutions including floats and inline displays based on past questions, but nothing seems to align my links to the left. It's worth mentioning that the original CSS setup was not done by me, as my CSS skills are limited.
This pertains to html/rails
<nav class="navbar navbar-expand-sm navbar-light">
<div class="container">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main-menu">
<ul class="nav navbar-nav">
<li class="nav-item"><%= link_to 'Link 1', '#', class: "nav-link" %></li>
<li class="nav-item"><%= link_to 'Link 2', '#', class: "nav-link" %></li>
<li class="nav-item"><%= link_to 'Link 3', '#', class: "nav-link" %></li>
</ul>
</div>
</nav>
CSS Code:
#main-menu {
background: none repeat scroll 0 0 #fff;
border: medium none;
}
#main-menu ul {
}
#main-menu ul li {
}
#main-menu ul li a {
padding: 5px 30px;
}
.navbar.navbar-light {
border: none;
background: none;
margin-bottom: 10px;
width: 100%
}
#main-menu .nav {
float: left;
margin: 0 auto;
@include size(md) {
width: 795px;
}
}