My first simple formatted webpage

This is the first webpage I've ever made, besides simplified tests. My goal was to have a navigation menu on the left, an image in the top left corner with a header to its right, and a block of text in the main body.

It's mostly what I had in my head, but there are a few things about it that I don't like:

-
The centering of the header horizontally. I couldn't find any way to reliably centre the header text. I tried adding auto margins around it, but it made literally no change. I ended up forcing it to a specified percentage from the left, but it's not exactly centred, and seems like a hack.

-
Centering the header text vertically. I tried setting verticle-align: middle, but it acted as though that was a invalid value, and used default baseline alignment. I was able to move it around by specifying a percentage vertical alignment, but again, that seems like a hack.

-
The text body doesn't line up with the top of the navigation menu. I tried removing the margin, but it made no difference for some reason.

-
The space to the left of the menu entries. I'd rather it not have all that space, since it's a waste, especially if I shrink the window and everything smooshes together. I supposed I could just use stacked links instead of a list, but a list seems like a better organization to use.

I'd also like feedback on anything else noteworthy. Style, code ordering, anything dumb I'm doing. Please let me know!

Since anyone testing this code won't have access to the pictures, here's what it looks like on my computer in Edge:

```


* {
/border: 1px solid red;/
}

#mainHeader {

}

#pascalPicture {
display: inline-block;

height: auto;
width: 20%;
}

#headerTextBox {
border: 5px groove darkblue;
position: relative;

display: inline-block;
vertical-align: top;

font-size: 20px;

width: 75%;

}

#headerText {
pos

-
You are missing a DOCTYPE. As you seem to use HTML5, it should be:

It comes before the opening html tag.

-
The title element is a required element. It belongs in the head:

  The title of the web page

-
It’s often a good idea to specify the character encoding. It should be the first element of head (I‘m assuming UTF-8):

  
  The title of the web page

-
Ideally you would not use the style attribute. So use

instead of

and add to your CSS:

body {background-color: sandybrown;}

-
Don’t use section just because you need an element for styling purposes. The section element is a sectioning content element, so it creates a new entry in the document outline.

If you need an element just for styling purposes (and not because it’s semantically warranted), use div.

So your header should probably look like this:

   

   
      
         This is a header!
      
   

-
You should use headings (h1-h6). They (together with the sectioning content elements) create the document outline, i.e., a hierarchy of your page’s content, like a table of contents.

(Depending on your heading structure, the #mainBody should likely not be a section but a div.)

To check your outline, have a look at the question Tool that displays outline of HTML5 documents.

-
Instead of using id to get hooks for your CSS, you might want to consider to use class instead. It has the benefit that a class can be used on more than just one element per document. And it has lower specificity for CSS.

As a rule of thumb: A good reason for using id is if you want to create anchors which let users jump to the element with that ID.

StackExchange Code Review Q#112191, answer score: 3