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?
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.
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>.
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!