When on mobile, navigation bar is off the center

My page looks fine when on full screen on pc, but when I make the viewport the smallest I can go, the navigation bar wraps, which is great, but then it is a little bit off to the right to the perfect center. Do you know why and how to fix this?

CodePen editor view: https://codepen.io/turchan/pen/yLJqYoG

Yeah, it’s because you are using <ul> element which has a default left padding. Change it to 0 and it would be perfectly centered.

1 Like

Also, if I increase the text size just a little the nav links at the top start to break. Is there a reason you are only giving them 35vw to work with?

1 Like

WORKED!! Thank you so much! :hugs:

@bbsmooth

Yes, I noticed it too and I’ve been having trouble with it. This is my landing page project, and I was trying to compare the sample code from FCC and mine.

Here is the sample code from FCC: https://codepen.io/freeCodeCamp/pen/RKRbwL

The sample uses 35vw for nav > ul:

nav > ul {
  width: 35vw;

and 60vw for logo:

.logo {
  width: 60vw;
}

I am just confused about why they used vw here instead of % or px, for example.

I am also not so sure how to make the perfect header without any breaks.

Would you be able to help me with this?

The sample is not responsive to text size changes at all so I would not use it as a starting point. Personally, for learning purposes, I would start completely from scratch instead of trying to modify an example.

One way you could handle this issue is using CSS break points to place the links appropriately depending on the width of the view port. If you narrow your browser all the way in then the links form a single column below the logo, which seems like a good option. And if you widen your browser all the way out the links are on the same line as the logo but there is enough space to have them side by side. The problem is in between these two extremes the links don’t have enough space and get scrunched up. One solution would be to have them move underneath the logo on a separate line so they have more horizontal space. I’m not going to tell you exactly how to do that but I will give you a hint that it is a flexbox property you’ll want to change on the <header>.

1 Like

@bbsmooth

I agree with you. I should start from scratch so that I can learn better, which I will do that. Thank you!

Ok, I will read more about the CSS breakpoints. Since you’ve given me a hint, I’ll try figuring it out and then start over. Thank you @bbsmooth so much!