How to fixed a header with equal margins in both side? - css

Question

I think it's a silly question but I'm struggling to adjust the header. Whenever I use the position as fixed or sticky, the margin doesn't work properly.
I want the same margin as the body section. But it's not working properly.
The current situation:
What I'm looking for:
codes I have used:
CSS:
.hh{
background-color:#BADA55;
height:150px;
border-radius:0px 0px 5px 5px;
box-shadow: 0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.12),
0 4px 4px rgba(0,0,0,0.16),
0 8px 8px rgba(0,0,0,0.20);
z-index:999;
position: sticky;
/*margin-right: 250px;*/
/*margin-left: 250px;*/
/*margin: 0 auto; */
width: auto;
top: 0;
overflow-x:hidden;
}
.logo{
width:58px;
height:58px;
}
.logoh{
font-size:32px;
float:right;
margin-left:12px; margin-top:3px;
font-family: Arial, Helvetica, sans-serif;
}
.bd{
border-top:3px solid #5D6E1D;
border-bottom:3px solid #5D6E1D;
line-height:0px;
}
HTML:
<div class="hh" >
<div style="width:100%">
<div class="container ">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 col-sm-12" style="text-align:center; padding:10px">
<div style="display:inline-block">
<div class="navbar-brand">
<img class="logo" src="images/logo.png" style="float:left">
<p class="logoh" style="font-weight:500"> Linda Hammond Research</p>
</div>
</div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<div style="margin-left:15px; margin-right:15px">
<nav class="navbar navbar-expand-lg navbar-light bd ">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" style="float:right">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent" >
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="about-me.php">About</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="research.php">Research </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="reports.php">Reports </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="professional-services.php">Professional Services </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="speaker.php">Speaker </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="prices.php">Prices </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="testimonials.php">Testimonials </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="terms-conditions.php">T&C </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="contact.php">Contact </a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

Answer 1

A solution could be to create a new class that you will add to your header and content like so:
.bodyWidth {
width: 80%;
margin-left: auto;
margin-right: auto;
}

Answer 2

Add max-with:{{size second box}} to hh class
or
put both box into a container class.
<div class="container">
//first box
//second box
</div>