CSS的定位问题

Question

我在下面提供了2张照片和我的CSS代码。我正在尝试将#bottomBar调高，使其直接位于下方，并使其宽度与黑色空间相同-您可以在下图中看到。

取决于我使用的是相对位置还是绝对位置，我得到的期望效果是直接位于黑色空间下方或具有相同宽度。但是永远不要同时使用。

我在html中使用了引导程序模板，这会导致我遇到的问题吗？

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