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; } } } } } }