Landing Page - Grid & Flexbox issues

1

Hello !
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 :
https://codepen.io/Kaguya-Otsutsuki/pen/VwYgOjb

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 :sob: 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 :sob:

2

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 <nav>.

(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 <img> and <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 <img> and <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 justify-content: space-between;

#nav-bar {
  background-color: white;
  display: flex;
  justify-content: space-between;
  width: 100vw;
}

In case you don’t know them:

Fun and good for practise:
flexboxfroggy.com
cssgridgarden.com

Quick, visual reference:
http://flexbox.malven.co/
http://grid.malven.co/

1 Like
3

Thank you so much ! I succeed !!! :smile:

1 Like