Tribute page - flexbox navbar trouble

1

Hi
I’ve been working on my tribute page today. Have got stuck on the navigation bar. It’s made using flexbox as I think that is gaining in popularity and will help make responsive pages in CSS easier.

Anyway, when the mouse hovers over the menu items on the right, they go grey as required but also make the menu items to the left move along.

Any advice would be greatly appreciated.

Thanks

Justin

2

Yo Justin, I checked your code, I turned
`

li a:hover {
background-color: lightgrey;
padding: 10px;
}
`
TO:

li:hover {
background-color: lightgrey;
padding: 10px;
}

It’s good now.

to understand what happened I suggest you put this in the first line of your CSS

  • {
    border: 1px solid;
    }

that puts a border around all elements in your website so you can see how margins and paddings reacting.

3

Thank you, xNavid,

That’s worked, great. And thanks for the * tip. I’d seen that in a tutorial video and wondered what it was for. Have often thought it would be nice to see a border around everything so that’s very useful!

1 Like