My BS 4 Navbar displays perfectly on Desktop, but when switching to mobile, the column within the navbar fails to fill the entire space, resulting in less than 100% width. This issue is highlighted by the purple area in the screenshot below:
https://i.sstatic.net/2N9qc.jpg
Upon inspecting the code, I noticed that the presence of flex-wrap: wrap; was causing the column width limitation on mobile devices. Removing or disabling flex-wrap: wrap; causes the items in the navbar and the Join/Apply links to appear disorganized.
I am seeking advice on what is causing this issue and how it can be rectified. My objective is to ensure that my Join/Apply buttons occupy 100% of the mobile device's size.
The HTML provided does not include any custom CSS code altering the default sizing of columns or rows.
<div class="navbar-collapse nav-fill w-100 collapse show" id="collapsing_navbar" style="">
<div class="container">
<div class="row">
<div class="col-sm-6 col-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#explore">Academics</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#rankings">Rankings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#surrounds">Surrounds</a>
</li>
</ul>
</div>
<div class="col-sm-6 col-nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#advantage">Work</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#living-sustainably">Living Sustainably</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how-we-serve">How We Serve</a>
</li>
</ul>
</div>
</div>
<div class="row d-sm-none mobile-nav-show">
<div class="col">
<a href="#" class="nav-link visit text-white">Visit</a>
<a href="#" class="nav-link apply text-white">Apply</a>
</div>
</div>
</div>
</div>