Positioning navbar CSS

Hi people, a question about positioning of my nav bar. When I make the width at the smallest of the browser, the word “contact” will dissappear for a part, see picture

I would like to position the nav bar like this:

This is the current ruleset of the nav bar:

ul {
display: flex;
list-style-type: none;
width: 500px;
justify-content: space-around;
font-size: 30px;
}

I have experimented with margin, but this doesn’t work. Any great ideas how to solve this riddle? Thank you for your help!

Hey Anson
In the first picture what is the width of the viewport?

Hi, thanks for your quick response, in case of the first picture it’s 500px wide and 334px in length

Mmh ok, can you post also the html related to the <ul> and the style its children?

1 Like

Hi @ansonams, try to add some padding-right to your list items, play with it until you get the desired results. I think we could help you better if post a code snippet of your nav element and its CSS.

1 Like

Thank you @chrisgeek07 and @usernamegiapreso I thought I had to change the nav margin itself, but it has to do with the list-items, like you said. I set the margin-right to 65px, so now you get this:

Happy with the result!

1 Like

Nice ! It looks pretty close to what you wanted I believe. You could still adjust the font-size of your list items so that they all fit in one line.

1 Like

Yes, I have set the value now to 50px. This is the result and I think it’s better this way:

1 Like

Well done ! Happy coding !

1 Like

Sometimes it is finding a needle in haystack. Luckily I have the Codecademy people to go to for help. I’m happy now and I wish you happy coding too!

2 Likes