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>

CodePudding user response：

Add max-with:{{size second box}} to hh class

or

put both box into container and set width and margin for that.

<div class="container">
  //first box
  //second box
</div>

.container{
  width: **;
  max-width: **;
  margin: **;
}

CodePudding user response：

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