Registration Form CSS nav-bar inside a div - html

Question

Hi everyone thank you for taking the time. I am trying to add the nav-bar that is out of place inside of a container. This is the HTML
<div class="container-login100" style="background-image: url('images/packages.jpg');">
<div class="wrap-login100 p-l-55 p-r-55 p-t-80 p-b-30">
<div class="nav-container">
<nav class="nav-bar-outer">
<buttton type="button" class="hamburger-btn"> HERE </buttton>
</nav>
</div>
<form class="login100-form validate-form">
<!--css form content-->
And this is the CSS.
[ Nav-Bar ]*/
.nav-container{
position: absolute;
width: auto;
}
.nav-bar-outer{
background-color: #ffbf00;
padding:5px;
height:50px;
width:390px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-position: center;
background-size: cover;
position: relative;
}
.wrap-login100 {
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
width: 390px;
background: rgba(0, 0, 0, 1);
overflow: hidden;
box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 3px 20px 0px rgba(0, 0, 0, 0.1);
}
.login100-form {
width: 100%;
}
.p-l-55 {padding-left: 55px;}
.p-b-30 {padding-bottom: 30px;}
.p-r-55 {padding-right: 55px;}
.p-t-80 {padding-top: 80px;}
.p-b-37 {padding-bottom: 37px;}
So I think because there is padding in the black container the bar is not positioning itself like I would like to how could it fit inside the container without me having to change the padding (since the content inside would get messed up)

Answer 1

Please add this new CSS to your CSS file.
.wrap-login100 {
position: relative;
}
.nav-container {
position: absolute;
width: auto;
left: 55px;
right: 55px;
}
.nav-bar-outer {
width: 100%;
padding: 0;
}