Image spacing help

1

Is there a way I can group the 3 pictures together so they all move together and keep the spacing?

I’d like to move them up too, so they’re closer to the paragraph writing and then have the footer just a little below the pictures. Any suggestions? http://codepen.io/timmparsons/pen/yaBjKx

Thanks

2

You can try wrapping them in a flex container.

<div class="flex-container">
  <img>
  <img>
  <img>
</div>

.flex-container {
  display: flex;
  justify-content: space-around;
}

.flex-container img {
  margin: auto;
}

Try removing the height: 400px; (or reduce its value) in .body-p

3

What does the flex do? I’ve added it and not seen any changes.

Reducing the body.p height helped though, thank you

4

Hmm that’s weird. It worked when I tried it. I added those CSS rules at the end of the CSS section.

It should look like this (and the images are nicely spaced) (the dashed lines mark the boundaries of the .flex-container)

Pasted image862×143 3.56 KB

flex is neat for creating layouts and is definitely worth checking out. Here’s a complete guide to flexbox.