Every time I try to add an element such as h1 with margin: 30px 0;, the margin ends up extending beyond the container!
This issue has plagued me on multiple occasions, but I was able to resolve it by using overflow: hidden
I am curious to understand what causes this problem and why the solution of using overflow works?
You can view a JSFiddle example here https://jsfiddle.net/LeoAref/zv6c2c2d/
.container {
background: #ccc;
}
.container.overflow {
overflow: hidden;
}
.secTitle {
margin: 30px 0;
}
code {
color: blue;
}<!-- secTitle margin goes outside the container -->
<div class="container">
<h1 class="secTitle">Container without <code>overflow: hidden</code></h1>
</div>
<!-- works fine here -->
<div class="container overflow">
<h1 class="secTitle">Container with <code>overflow: hidden</code></h1>
</div>