Adding 3 Logos at the top of the screen

Issue

I'm new to HTML and trying to work on a practice project. What I'm stuck with is adding 3 logos at the top of the page 1 in the left 1 in the middle and 1 in the right. I tried to follow previous methods like using floats and flex method but I either end up with all the images side by side and can't move their positions or just one under an other ! How can I do that?

Solution

First of all, welcome in the wonderful world of HTML !

Here's the HTML

<div class="container">
 <img class="logo" src="yourlogo.png"/>
 <img class="logo" src="yourlogo.png"/>
 <img class="logo" src="yourlogo.png"/>
</div>

---

And the CSS...

.container {
 display: flex;
 justify-content: space-between;
 align-items: center
}

I can give you some ressources for learn Flexbox! Flex are wonderful and you can do a lot of cool things very easily

Flexbox introduction on CSS TRICKS

Flexbox froggy (little game for understanding flex's logic)

Answered By - superdunck