first time building a website help

You'll have to use your dev inspector to solve these sorts of things. I'll tell you what's going on, and you'll have to use your own dev inspector to verify the solution.

The white bar up top, it's coming from default browser styling. More specifically, the <ul> tag. Because you don't have a margin set, the browsers kindly I say sarcastically set a 16px margin top and bottom. If you zero out the margin on the list, the white bar goes away.

The extra padding is coming from your style.css file, specifically line 45. You have this rule

#nav a, #nav li {
    font-size: 1.5rem;
    text-decoration: none;
    display: inline-block;
    list-style-type: none;
    margin: 15px 0 0 15px;
    font-family: cursive;
}

Which means for every list item, and every anchor in a nav element, add all these styles. So the list item gets its white background from the selected class, but it also gets margin: 15px 0 0 15px. You archor element nested inside of the list item, get these exact same rules, so it gets another margin: 15px 0 0 15px.

When you hover and your anchor gets pushed down, it's because your adding a 3px border to a hovered anchor item. The box model by default adds that extra 3 px each side outside of any padding, but inside the margin, which means your element grows, and pushes the elements around it.

To combate this, I might add a `3px solid transparent border around the element when not hovered, so the extra border space is taken into account when the page is painted, so when you hover and see the border, box models don't collide since the space was already taken, just invisible before.

So to I might try this

#nav a {
  border: 3px solid transparent;
}

To get your H1 tags correct, we need to modify your HTML and CSS. We will need to introduce a wrapper div, so we want to add this to your CSS

.welcome {
  display: inline-block;
}

Now your bottom border should behave as you want, but the text isn't centered, right? So, we need a parent to contain it. So you'll need to wrap your H1 in a div, I chose a div with the class of center, like so

<div class="center">
  <h1 class="welcome">Welcome to Korea</h1>
</div>

And to make our div do something, all we have to do at this point is set our text align, and it'll align it's children, so

.center {
  text-align: center;
}

And that should be what you want.