In all my projects, I meet many troubles with positioning. There is something I obviously don’t understand but I don’t see what. When I read the theory parts or when I watch tutos, it’s crystal clear. As soon as I try to code, everything goes wrong.
Here my project :
I would like the logo to stay at the top left and the list to be at the top right. All within the navbar. I tried flexbox and grid : there is no difference : nothing works, nothing moves I’m desperate.
I first thought it was a parent/child issue. I added a wrapper class in a
. Nothing happened.
Thanks for helping me
Hi, I think the first thing is that you need to have the
display property (e.g.
display: flex; or
display: grid;) one level above the elements you want to move. Currently you have
display: grid; on the wrapper. One level down there is the
<nav> element. So grid is applied to the
<nav> only. If you use flex on the wrapper it would also only apply to
(I encourage you to use the auto-formatter feature in codepen. -> small upper right arrow in html-box -> ‘Format HTML’ - It helps to make these things easier to catch. There are also auto-formatters for text editors.)
Since you want
<ul> to be moved apart, you have to look one level up, that is
<nav>. If you add, for example,
display: flex to the
<nav>, it would apply to
<ul>. But it would not yet be defined what you want these things to do. Currently the
<nav> is only as wide as the content inside, but you want it to be full-width. So if you add
width: 100vw; it will go all the way to the right. And another “but”: the
<ul> is still stuck to the left. To move it to the right, you can add
In case you don’t know them:
Fun and good for practise:
Quick, visual reference:
Thank you so much ! I succeed !!!