I have this little issue but I can't figure out what it is, could someone take a look and enlighten me - basically, I'm building a website with bootstrap and can't figure out why do I have this little bit of an extra empty space on the right hand of the header, like in the screenshot below (purple highlight):
That's the code for it:
HTML:
<header id="header" role="banner">
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="row w-100 align-items-center">
<div class="col-lg-6 col-6 logo-col">
<a class="navbar-brand" href="<?= get_permalink(7) ?>">
<img class="logo" src="" />
</a>
</div>
<div class="col-lg-6 col-6 d-flex navigation-col">
<button class="navbar-toggler ms-auto d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-none d-lg-flex w-100 desktop-menu">
<ul class="navbar-nav">
<li class="nav-item <?= get_the_ID() === 9 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 9 ? 'active' : null ?>" <?= get_the_ID() === 9 ? 'aria-current="page"' : null ?> href="<?= get_permalink(9) ?>">Services</a>
</li>
<li class="nav-item <?= get_the_ID() === 12 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 12 ? 'active' : null ?>" <?= get_the_ID() === 12 ? 'aria-current="page"' : null ?> href="<?= get_permalink(12) ?>">Sailings</a>
</li>
<li class="nav-item <?= get_the_ID() === 14 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 14 ? 'active' : null ?>" <?= get_the_ID() === 14 ? 'aria-current="page"' : null ?> href="<?= get_permalink(14) ?>">Equipment</a>
</li>
<li class="nav-item <?= get_the_ID() === 16 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 16 ? 'active' : null ?>" <?= get_the_ID() === 16 ? 'aria-current="page"' : null ?> href="<?= get_permalink(16) ?>">Customer Area</a>
</li>
<li class="nav-item <?= get_the_ID() === 18 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 18 ? 'active' : null ?>" <?= get_the_ID() === 18 ? 'aria-current="page"' : null ?> href="<?= get_permalink(18) ?>">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>
And that's the scss:
header {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #fff;
nav.navbar {
div.logo-col {
a.navbar-brand {
img {
width: 200px;
}
}
}
div.navigation-col {
div.desktop-menu {
ul.navbar-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
li {
padding-left: 0.5rem;
padding-right: 0.5rem;
&.active {
background-color: #f1f2f2;
border-radius: 20px;
}
a {
font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 18px;
color: #000;
white-space: nowrap;
}
}
}
}
}
}
Because .row has a negative margin, and when you give it width: 100% it breaks. If you want to stretch .row in a flex container, set it to, for example, .row{ flex: auto; }:
*{
box-sizing:border-box;
}
header {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: #fff;
.row{
flex: auto;
}
nav.navbar {
div.logo-col {
a.navbar-brand {
img {
width: 200px;
}
}
}
div.navigation-col {
div.desktop-menu {
ul.navbar-nav {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
li {
padding-left: 0.5rem;
padding-right: 0.5rem;
&.active {
background-color: #f1f2f2;
border-radius: 20px;
}
a {
font-family: "montserrat", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 18px;
color: #000;
white-space: nowrap;
}
}
}
}
}
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
<header id="header" role="banner">
<nav class="navbar navbar-expand-lg">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-6 logo-col">
<a class="navbar-brand" href="<?= get_permalink(7) ?>">
<img class="logo" src="" />
</a>
</div>
<div class="col-lg-6 col-6 d-flex navigation-col">
<button class="navbar-toggler ms-auto d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-none d-lg-flex w-100 desktop-menu">
<ul class="navbar-nav">
<li class="nav-item <?= get_the_ID() === 9 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 9 ? 'active' : null ?>" <?= get_the_ID() === 9 ? 'aria-current="page"' : null ?> href="<?= get_permalink(9) ?>">Services</a>
</li>
<li class="nav-item <?= get_the_ID() === 12 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 12 ? 'active' : null ?>" <?= get_the_ID() === 12 ? 'aria-current="page"' : null ?> href="<?= get_permalink(12) ?>">Sailings</a>
</li>
<li class="nav-item <?= get_the_ID() === 14 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 14 ? 'active' : null ?>" <?= get_the_ID() === 14 ? 'aria-current="page"' : null ?> href="<?= get_permalink(14) ?>">Equipment</a>
</li>
<li class="nav-item <?= get_the_ID() === 16 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 16 ? 'active' : null ?>" <?= get_the_ID() === 16 ? 'aria-current="page"' : null ?> href="<?= get_permalink(16) ?>">Customer Area</a>
</li>
<li class="nav-item <?= get_the_ID() === 18 ? 'active' : null ?>">
<a class="nav-link <?= get_the_ID() === 18 ? 'active' : null ?>" <?= get_the_ID() === 18 ? 'aria-current="page"' : null ?> href="<?= get_permalink(18) ?>">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</header>