[Solved] Placing three pictures under a big picture

by


So the problem with your layout is that you used position:absolute for your three small images. Here is a way to do it right:

Structure your content vertically by giving your main container a display: grid

Each horizontal element, like the Hero, the three Images or the footer should be a single container inside of that big wrapper like that:

<div class="main-wrapper">
<section>Hero</section>
<section>Images</section>
<section>Footer</section>
</div>

.main-wrapper {
  /* Forces each element inside the wrapper to be stacked on top of each other */
  display: grid;
}

section {
 /* display flex forces the items inside each section to be display horizontally */
 max-width: 1300px;
 margin: 0 auto;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

This will give you a solid base layout that you can further extend on with your special classes and styles.

I forked your codepen and gave it the basic structure I described here. You can have a look at it here: https://codepen.io/cainytheslave/pen/qBxVvyw

2

solved Placing three pictures under a big picture