I'm encountering a strange issue with padding in my navbar that seems to be dependent on the navbar-expand property.
For instance, when I set it to MD, it appears like this:
https://i.sstatic.net/czytc.png
As you can see, the logo and menu button do not align with the rest of the page. Can someone help me figure out what's wrong in my code?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="/">Logo<!--<img src="/images/logo.png" alt="Logo" />--></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menu" aria-controls="menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Grouping menu items for better display on mobile devices -->
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar-nav">
<li class="nav-item "><a href="/index.html" class="nav-link">Home</a></li>
<li class="nav-item "><a href="/index.html" class="nav-link">Offer</a></li>
<li class="nav-item "><a href="/index.html" class="nav-link">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</header>
<main class="container">
<section>
<div class="row">
<div class="col">
<h1>Head</h1>
<p class="text-justify">Sed suscipit magna nulla, quis aliquam massa placerat nec. Cras ultricies, tortor ut pellentesque finibus, tellus nunc rutrum felis, ac lobortis turpis ligula eu lorem. Maecenas et dolor interdum, tristique lacus non, sollicitudin sapien. Sed eu mollis tellus, ac vestibulum felis. Aliquam eu egestas nibh. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer et purus ut mauris tempor ultricies. Phasellus et vulputate erat. Quisque at venenatis eros, sit amet convallis enim. Aenean molestie egestas ipsum, vel malesuada ligula. Curabitur velit dolor, condimentum in pharetra lacinia, ultricies et sem. Phasellus et laoreet sapien. Pellentesque volutpat tortor quam. Maecenas nec ultricies magna.</p>
</div>
</div>
</section>
</main>