Witam. Mam pytanie- otóż zacząłem korzystać ostatnio z boostrapa i tworzę stronę. Tylko nie rozumiem, dlaczego navbar jest krótszy od reszty kolumn https://ibb.co/qMn72F9 Wygląda to mocno nieestetycznie i nie za bardzo wiem jak to poprawić. Zamieszczam też kod strony i css
<html>
<head>
<title>Licencjat Edusfera - studia 100% online</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body onload="setInterval(setInformation,3000);/*setExercises()*/">
<header>
<div class="col col-lg-12" id="navbar">
<nav class="navbar navbar-dark bg-primary navbar-expand-lg">
<!--Logo i nazwa strony-->
<a class="navbar-brand" href="index.html">
<img src="img/favicon.ico" width="30" height="30" class="d-inline-block mr-1 align-bottom" alt="">
Studia licencjackie Edusfera
</a>
<!--Guzik nawigacji-->
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#mainmenu" aria-controls="mainmenu" aria-expanded="false"
aria-label="Przełacznik nawigacji">
<span class="navbar-toggler-icon"></span>
</button>
<!--Zakładki-->
<div class="collapse navbar-collapse" id="mainmenu">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >O nas</a>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
role="button" aria-expanded="false" id="submenu" aria-haspopup="true">Oferta</a>
<div class="dropdown-menu bg-primary" aria-labelledby="submenu" id="przedmioty">
<a class="dropdown-item" href="#" id="nav-color">DORADZTWO ZAWODOWE I PRZEDSIĘBIORCZOŚĆ</a>
<a class="dropdown-item" href="#" id="nav-color">PROFILAKTYKA- PSYCHOPEDAGOGICZNA Z ELEMENTAMI TERAPII</a>
<a class="dropdown-item" href="#" id="nav-color">PROFILAKTYKA – NIEDOSTOSOWANIA SPOŁECZNEGO I OPIEKA SOCJALNA</a>
<a class="dropdown-item" href="#" id="nav-color">PORADNICTWO I COACHING KARIER (DORADZTWO ZAWODOWE)</a>
<a class="dropdown-item" href="#" id="nav-color">PEDAGOGIKA WCZESNOSZKOLNA Z TERAPIĄ PEDAGOGICZNĄ</a>
<a class="dropdown-item" href="#" id="nav-color">PEDAGOGIKA RESOCJALIZACYJNA Z INTERWENCJĄ KRYZYSOWĄ</a>
<a class="dropdown-item" href="#" id="nav-color">PEDAGOGIKA OPIEKUŃCZO-WYCHOWAWCZA</a>
<a class="dropdown-item" href="#" id="nav-color">PEDAGOGIKA MAŁEGO DZIECKA Z ELEMENTAMI LOGOPEDII ŻŁOBKOWA</a>
<a class="dropdown-item" href="#" id="nav-color">PROFILAKTYKA – NIEDOSTOSOWANIA SPOŁECZNEGO I OPIEKA SOCJALNA (RESOCJALIZACJA)</a>
</div>
</li>
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"
role="button" aria-expanded="false" id="submenu" aria-haspopup="true">Organizacja studiów</a>
<div class="dropdown-menu bg-primary" aria-labelledby="submenu">
<a class="dropdown-item" href="#" id="nav-color">Tryb nauki</a>
<a class="dropdown-item" href="#" id="nav-color">Czesne oraz dofinansowanie</a>
<a class="dropdown-item" href="#" id="nav-color">Cudzoziemcy</a>
</div>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" >Czesne i dofinansowanie</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" >Zgłoszenia</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#" >Kontakt</a>
</li>
</ul>
<!--Wyszukiwarka na stronie
<form class="form-inline">
<input class="form-control" type="search" placeholder="Wyszukaj"
aria-laber="Wyszukaj">
<button class="btn btn-light" type="submit">Znajdź</button>
</form> -->
</div>
</nav>
<!--pasek reklamowy-->
<div class="col-12 text-center" id="information">
Podyplomowe studia on-line - wolność nauki.
</div>
</div>
</header>
<section id="content">
<div class="row justify-content-center">
<div class="col-4" style="background-color: green;">
b
</div>
<div class="col-4" style="background-color: orange;">
c
</div>
<div class="col-4" style="background-color: yellow;">
d
</div>
</div>
</section>
<section id="footer">
<footer>
<div class="col-12 text-center">
Licencjat.Edusfera.edu.pl - Wszelkie prawa zastrzeżone.
</div>
</footer>
</section>
<!--Strzałka do powrotu na górę strony-->
<button onclick="topFunction()" id="myBtn" title="Go to top">
<img src="img/arrow_up.png" width="80px">
</button>
<script>
//Pasek z informacją
var text=['Podyplomowe studia on-line - wolność nauki.',
'Rekrutacja ciągła - 24 godziny na dobę, 7 dni w tygodniu.'];
i=0;
function setInformation(){
if(i<text.length-1) i++;
else i=0;
document.getElementById('information').innerHTML = text[i];
}
//Przedmioty w pasku nawigacyjnym
var exer=['<a class="dropdown-item" href="#" id="nav-color">DORADZTWO ZAWODOWE I PRZEDSIĘBIORCZOŚĆ</a>',
'<a class="dropdown-item" href="#" id="nav-color">DORADZTWO ZAWODOWE I PRZEDSIĘBIORCZOŚĆ</a>']
i=0;
x=exer.length;
function setExercises(){
document.getElementById('przedmioty').innerHTML = exer[0]+exer[1];
}
//Obsługa przycisku do scrolla na górę
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
//Function
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
footer{
background-color: #007EF9;
color: white;
}
#navbar{
position: fixed;
top:0;
left:0;
}
#content:before{
content: "";
display:block;
height:80px;
}
@media screen and (max-width: 1029px) and (min-width:992px)
{
#content:before{
content: "";
display:block;
height:105px;
}
}
#text_content{
overflow-wrap: break-word;
}
#information{
background-color: #de9b41;
color: white;
font-weight: bold;
max-height: 24px;
}
#nav-color{
color: white;
}
#nav-color:hover{
background-color: dodgerblue;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: rgba(0,0,0,.0);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: rgba(0,0,0,.2);
}
.nav-item:hover
{
background-color: dodgerblue;
}