Cannot center two divs in a header

HTML-CSS
1

Tell us what’s happening:
I am trying to use display:flex" and j"ustify-content:space betweeen" on the header. But it does not work. I think the reason second div (class=“nav-social-media” with twitter pictures) takes 287.16 x 22 space but I don’t know why and how to fix it.

Your code so far
https://codepen.io/GeorgiiEliseev/pen/PoGVxRb?editors=1100

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.2 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

2

Seems to be an issue with how flex-box determines layout while you have nested images that have width: 5%.

I would avoid using fixed widths for images and would instead suggest you put the width on the parent A tags. I typically prefer to allow the parent container to determine the images width. It’s the reason you have the max-width: 100%; height: auto on your img tag already.

You’ll also want to flex .nav-social-media otherwise your icons will display vertically and try to take up as much space as they can (512px).

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.