Mastering CSS

Using overflow property with hidden value

The next method we'll look at is overflow: hidden. Go to your CSS and find the .secondary-section class. What we can do is add the overflow property with the value of hidden:

.secondary-section { 
  margin-bottom: 50px; 
  background-color: #7EEEAF; 
  overflow: hidden; 
} 

overflow: hidden is a true hack. It was never meant for remedying collapsed containers; it was meant for hiding any content image or text that overflowed its container. However, magically, overflow: hidden also clears the collapse. If we save our CSS and go to our site, we will see this is evident by the background, which is now green in color:

A small problem with overflow: hidden is that you may want the content to overflow the container, ...