I am having difficulty ensuring that two elements occupy the entire width of the page regardless of the device size. Nav1 and Nav2 are positioned alongside each other in nav-container and will contain content. This is why I need them to be separate.
I initially tried setting the width to 50% for each .nav# element, thinking it would make them fill the full width on any device. However, this approach did not yield the desired result.
.nav-container {
position: absolute;
display: flex;
float: right;
}
.nav1 p {
display: inline;
}
nav {
background: rgb(255, 255, 255);
}
.nav1 {
width: 50%;
height: 300px;
}
.nav2 {
width: 50% height: 300px;
}<div class="nav-container">
<nav class="nav1">
<p class=""></p>
</nav>
<nav class="nav2">
<p class="menu">
Menu
</p>
</nav>
</div>Attempting to replicate a navigation bar similar to the one found on this website