Why Does Setting Overflow Alter Layout of Child Elements

Keep overflow:hidden behavior after will-change:transform

From the specification:

If any non-initial value of a property would cause the element to generate a containing block for fixed positioned elements, specifying that property in will-change must cause the element to generate a containing block for fixed positioned elements

So basically you are facing the issue with transform and not the will-change because:

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.^ref

So transform is creating a containing block for fixed position element and will-change should do the same and since the .parent is now the containing block of the fixed element it will also apply its overflow on it.

Basically you can do nothing if you cannot remove the will-change property or change its value from .parent

Make floating child visible outside an overflow:hidden parent

You can use the clearfix to do "layout preserving" the same way overflow: hidden does.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

add class="clearfix" class to the parent, and remove overflow: hidden;

Child elements are going out of parent element

There are too many CSS frameworks like bootstrap, tailwind etc that can solve your problem and reduce lines of code. But if you want to create your own CSS then you can do this with flexbox and CSS grid system.

In your code adding display: inline-block; width: 100%; to your header class will fix your issue. Also use float only to main ul not li. I've made a little tweak to your code as below.

body{
    background-color:#191C26;
    color:white;
}
 
.header{
    margin-top:20px;
  border: 2px solid;
  display: inline-block;
  width: 100%;
}
.header-image{
    width:10%;
    display: inline-block;
    position:relative;
    top:36px;
}
 
.header-image img{
    width:100%;
}
 
.left-menu, .right-menu{
 
    list-style: none;
    font-size: 200%;
}
 
.left-menu a, .right-menu a{
    text-decoration: none;
    display: inline-block;
    color:white;
}
 
.left-menu{
    float:left;
    margin:0px;
    margin-left:12%;
}
 
.left-menu li{
    float:left;
  
}
 
.left-menu a{
  margin-right:20px;
}
.right-menu{
    float:right;
    margin:0;
}
 
.right-menu li{
    float:left;
    margin-left:10px;
}
 
.right-menu a{
    margin-left:20px;
}

<div class="container">
        <div class="header">
                    <div class="header-image"><img src="images/logo.png" alt="logo"></div>
                    <nav>
                        <ul class="left-menu">
                            <li> <a href="#">Services</a></li>
                            <li><a href="#">Portfolio</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#">Contact Us</a></li>
                        </ul>
 
                        <ul class="right-menu">
                            <li><a href="#">+91 964941****</a></li>
                            <li><a href="#">Get a Quote</a></li>
                        </ul>
                    </nav>
        </div>
 
        <div class="content-a">
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
        <div class="content-a">
            <span>DEMO SESSIONS</span>
            <h1>Get Demo Class Now</h1>
        </div>
    </div>

Divs laid out side by side with inline-block change layout when child elements added

    .wrapper {
      display: flex;
    }
    
    .card {
      background-color: red;
      margin-left: 15px;
      width: 100px;
      height: 50px;
      display: inline-block;
    }

Try wrapping the 3 divs in a `flexbox`.

    <div class="wrapper">
      <div class="card"></div>
      <div class="card">
        <div>Testing 123</div>
      </div>
      <div class="card"></div>
    </div>

Margin on child element moves parent element

Found an alternative at Child elements with margins within DIVs You can also add:

.parent { overflow: auto; }

or:

.parent { overflow: hidden; }

This prevents the margins to collapse. Border and padding do the same.
Hence, you can also use the following to prevent a top-margin collapse:

.parent {
    padding-top: 1px;
    margin-top: -1px;
}

2021 update: if you're willing to drop IE11 support you can also use the new CSS construct display: flow-root. See MDN Web Docs for the whole details on block formatting contexts.

---

Update by popular request:
The whole point of collapsing margins is handling textual content. For example:

h1, h2, p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  outline: 1px dashed blue;
}

div { outline: 1px solid red; }

<h1>Title!</h1>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
</div>
<div class="text">
  <h2>Title!</h2>
  <p>Paragraph</p>
  <ul>
    <li>list item</li>
  </ul>
</div>

---

Related Topics