Build a Personal Portfolio Webpage - can't make sticky header

Programming
1

Hello!

The issue:
i’m trying to make ‘sticky’ header work, mainly because adding margins with ‘fixed’ header seem .. crude(unless there is a way to make a scalable? margin - since my header is 15vh).
And another small issue - i’ve added borders to a sticky header, but no matter what i do, i can’t get rid of empty space between borders and preview frame(fixed header doesn’t have that issue).

Code so far:
HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial scale=1.0">
    <link rel="stylesheet" href="./styles.css">
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </nav>
    </header>
    <section id="welcome-section">
        <h1>Welcome!</h1>
    </section>
    <section id="projects">
      <a id="project-tile" href="" target="_blank"><img src="" alt="project img"><p>Project name</p></a>
    </section>
    <section id="contacts">
      <a id="profile-link" href=""> Profile link</a>
    </section>
  </body>
</html>

CSS:

header {
  width: 100%;
  height: 15vh;
  /* display: flex;
  justify-content: space-between; */
  position: sticky;
  border: 1px solid black;
}

#projects {
  display: grid;
  /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
}

section {
  height: 100vh;
}
2

Setting it to position: sticky isn’t enough. You also have to place it on the page, such as using the top property if you want to set it to the top of the page.

All browsers give the body element a default margin, which is causing that space. So you just need to zero out the margins for the body element.

3

Silly me, though i could’ve sworn i tried setting top property yesterday and it didn’t work, or maybe i forgot, not sure. It does stick now, thanks.

Removing body margins did help, but now i have horizontal scrollbar becaus of vertical scrollbar(even though width is 100%)

4

scrollbar problem solved.

* {
  box-sizing: border-box;
  margin: 0;
}