Text Centering Off

I can see a padding in .nav-link (padding: 0.5rem 1rem)
I can see a padding in .btn (padding: 0.375rem 0.75rem)
both in bootstrap.css

They both influences the space in front of the button text, and as this space is left free anyway, the text can not move more to the left edge to stay in the center.

Note that you also have a .btn in style.css

You use the padding to keep distance between the item, but it affects also the buton border for Join and Log In

Hmmmm.. Sounds like I need another CSS style just for those two buttons?

I just would assume this, it depends where the css comes from.
As more generic a css is, as more influence it may have on other parts of your application.
So, if this is your only issue, may be better using a dedicated style for these buttons...

On the other hand, there is still a lot of space on the left and right side of your navigation. So possibly a option just to leave a bit more space to float. Even if you make the screen a bit more smaller, the navigation disappears completely.

But also you may have to decide, what is the smallest size you want to support and what makes sense for reading.
At the end, most of the website struggle a little bit, if you make them too small.

As you can see as you make it smaller the hamburger appears which is fine. Struggling on how to make the text stay in the center as it grows smaller.  Not sure how to do this.

You can use the browsers developer tool...
In MS Edge right click on the item... Inspect.. Or F12. There you can play around with all the style sheets. Forefox similar.
But even could not find ad hoc a way to format it different beside to remove the padding. I can not change the size, not sure if you can do it.
It just has to work until the view switches. 
The other idea is just, to just add a space at the end of the word, which forces the border to leave some space on the other side... Possibly this way you can make it more centered.

Hey David,

Your CSS has some media queries that change the padding on those buttons when the browser is at a set width. The default padding for the links is set as

.nav-link {
    padding : 0.5rem 1rem;
}

This gives the links a left and right padding of 1rem. You then have a media query which comes into effect when the browser is less than 1000px wide:

#header .nav-menu.nav-demo-2 .nav > li > a {
    padding-right: 0px;
}

This means that under 1000px wide, you still have the left padding of 1rem, but a right-padding of 0, which is why the buttons lose the centering. It happens on all of your links, but only appears to be off-centre on the last 2 because of the border.

You would probably be better off changing the padding on the media query to set both left and right padding equally, for example:

#header .nav-menu.nav-demo-2 .nav > li > a {
    padding: 0px 0.3rem;
}

That will maintain an equal left/right padding (0.3rem) and therefore keep the content centred.

Tried both solutions...

Select allOpen in new window

#header .nav-menu.nav-demo-2 .nav > li > a {
    font-size: 14px;
    padding: 0.5rem 1rem;
}

Select allOpen in new window

and

#header .nav-menu.nav-demo-2 .nav > li > a {
    padding: 0px 0.3rem;}

Select allOpen in new window

Neither worked.

Have you tried just to add one or two spaces at the end of JOIN and LOG IN?

Hey David,

You've not added it in the right place. As I said, you're using Media Queries in your CSS. This is a way to apply different styles to elements based on the screen resolution. In your CSS, you have the padding applied to a media query of less than 1100px, so that's where you need to update the CSS.

In your style.css file, around about line 7899, you'll see this code:

@media(max-width:1100px){
    #header .nav-menu.nav-demo-2 .nav > li > a{
	font-size: 14px;
	padding-right: 0px;
    }

Select allOpen in new window

That's the bit that you need to change - you need to set the padding for screen resolutions less than 1100px.

Thank you. Almost there.  There is one area where it doesn't work.  Bring up the site and slowly reduce the window and then make it larger.  I am assuming that it's falling through the cracks on the 1100 screen size. So maybe I have to add to another place as well?

Hey David,

I'm not seeing any problems. It all appers to be working correctly now.

Hi Chris!  Just tried it...

OK,

It's working for me in Firefox, so I'm guessing that your browser is automatically trying to parse an incorrect CSS rule. In the CSS, you now have this:

 #header .nav-menu.nav-demo-2 .nav > li > a {
    font-size: 14px;
    /*padding: 0px 0.3rem;*/
    padding-right: 0.5rem 1rem;
}

That rule for padding-right is wrong, which is why Firefox ignores it. Other browers may try to interpret it. It should be padding, and NOT padding-right

My bad.  Cleared the cache!

Thank you everyone for your help!