How to center my nav-links

HTML-CSS
#1

Tell us what’s happening:
How can I center my headings; get started, recipes, shop? I think I listed too many options and don’t know what to keep or change (or none of below)??

.nav-bar{
display: flex;
list-style: none;
justify-content: center;
}

recipes{
margin-left: auto;
margin-right: auto;
justify-content: center;

Your code so far
https://codepen.io/juligrossman/pen/eYJOrZb
Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15.

Challenge: Build a Product Landing Page

Link to the challenge:

#2

I’m a little confused here. The .nav-bar <ul> is already centered using flexbox. But then you have a duplicate #nav-bar <nav> tag that is not centered. Are you keeping both of these? Can’t you just use flexbox for the <nav> as well? Maybe I am not understanding your question correctly?

#3

I tried to clean it up a little from what you said. I am trying to figure out how to center the word “recipes”… I get close, but it’s off. I would prefer having the web site center it - not me adding padding as it could look different on different screens. My “justify” content - may not be working or listed correctly. I am new to coding and took off a couple months and trying to wrap my head around things again. Thanks for your help.

#4

So if you center the word “Recipes” then your header menu as a whole will be off because you will need to shift it to the left in order to get “Recipes” centered under the loaf of bread. Is this what you really want to do? I think most people would want the entire menu centered as a whole.

I would lose the padding around the <a>s that you added (no padding at all around those). If you want to create space between the <a>s then you can use the adjacent selector operator to fill space between them:

#nav-bar a + a {
  margin-left: 2em;
}

That will add a 2em left margin on any <a> that is immediately preceded by an <a> in your menu. So the first <a> gets no left margin while the second and third <a> do.

#5

Ok I did what you suggested and it looks pretty good. Yes, I did want the entire thing centered, not just the word recipes. I am not familiar with what you suggested of #nav-bar a + a { margin-left, is there a place you could direct me for reading up on this? It’s rough getting a go again after so much time off and I was/am a beginner at that.

I’ve been W3 searching for how to lengthen my “email placeholder”, but cannot find anything that changes it (you will see the textarea row and textarea columns it suggested, but neither makes my box longer (so an entire email will show). Suggestions?

#6

Info on the adjacent sibling selector can be found at:

I would not recommend you put 30em for the left margin on those adjacent <a>s. If you want the three menu items to fill out the entire width of the page then use justify-content flexbox property on the <nav>. You can find out more about this property (and flexbox in general) at

If you want to make the <input> for the email address wider then you can use the CSS width property on it. I would recommend you use ‘em’ units for it. Also, you can’t have a <textarea> inside of the <input>. Get rid of the <textarea> there completely. You only need the <input> to get the email address.