Css problems with positioning - html

Question

I have included 2 photos and my css code below. I am trying to bring my #bottomBar up so its directly under and that its the same width as the black space - you can see in the images below.
Depending on if i use position relative or position absolute i get the desired affect of either being directly under the black space or being the same width. But never both at the same time.
I am using a bootstrap templet in my html, would that cause the issues that i am getting?
css position relative
css position absolute
body{
margin: 0;
padding: 0;
}
.container{
padding: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
#header{
display: flex;
padding: 5px;
width: 100%;
height: 10vh;
background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
h1{
position: relative;
margin: auto;
font-size: 6vw;
}
#img{
width: 15vw;
}
.navbar{
padding: 5px;
background: linear-gradient(to right,white, #a5c6ff, #0066ff);
}
.navbar-toggler{
display: flex;
padding: 0;
margin: 0;
width: 10vw;
height: 4vh;
}
.navbar-toggler-icon{
height: 3vh;
width: 9vw;
margin: auto;
}
#bottomBar{
position: absolute;
top: 100%;
width: 100%;
}