Centering the header

[Susan626]

I am having the worst time centering my header. Have done a number of searches and code examples but I can’t get it to center.

Any tips?

here is the codepen

Technical Document

thanks!

[lepros]

First thing I did was use the “Format HTML” option so I could read your HTML more easily. I recommend you do that too and then save your pen afterward.

Your h1 is inside <div class="container"> which is set to 15% width.

[lepros]

I got rid of your #header and .container. They were redundant with the #navbar. That in itself is a container. So I replaced the .container selector with #navbar selector for that styling. I moved h1 out of all that in the HTML and gave it its own selector in the CSS. You’ll notice that width in #navbar (formerly your .container) is set to 15%. So the screen only has 85% width left. Divide that by 2. That’s why I have margin-left: 42.5% and margin-right: 42.5% in the h2 selector. Hopefully the screenshot below is the desired effect you were trying for.

#navbar{
    margin: 0;
    width: 15%;
    display: flex;
    float: inline-start;
    position: relative; /* Set the navbar to fixed position */
    left: 0; /* Position the navbar at the left of the page */
}

h1 {
  margin-left: 42.5%;
  margin-right: 42.5%;
}

[Susan626]

Thanks I think I need to work on this more. My h1 is still to the left but my navbar is now at the top of the page instead of to the left.

Did this in v studio not the codepen yet