I´ve been working on this page for the StyleStage project and I´m stuck trying to figure out how to center a title with justify and align commands as well as how to create a horizontal navbar. I´ll post a link to the code in my CodePen below. (IMPORTANT: You cannot change any of the HTML in StyleStage. Only CSS.)
The first problem is my title justifies left. I´ve used justify-self because I´m addressing header .container h1. This didn´t work so I used justify-items as well as justify-content. No luck. What am I missing?
The second problem is my navbar. It stacks in a single column to the left of the page; however, I want it to spread horizontally below the title. I´ve tried giving li the display of inline-block and this works somewhat, but I know I can do this with just grid…I just haven´t puzzled out how. What am I missing?
for the second problem,i will see what i can do.it is just your usage is a little complicated any makes it hard to debug the issue.i will reply when i find it,until then some one on the forum will help you.good luck.
The container element is just a normal block element, justify-self has no effect on its children. The Chrome dev tools tell you this as well (you get a faded (i) icon next to the property you can hover over). It would work if the container was set as a grid container but it will pack the items which I’m guessing is not what you want.
If you want to center align text you can always just use text-align: center on the text element.
Your nav ul is also just a normal block element, as such its children will stack. You can set the ul to be a flex container or a grid container with columns defined. You also did not remove the default padding and margin on the ul which will mess with its placment.
You do not seem to be using the developer tools the browser provides. Please do so.