Andrew provided a nice answer for you but to not run into this kind of problem again I suggest always adding this to your main .css file.

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

Otherwise just add this to the html and body elements.

The gaps are most probably from your parent body element. Add the following to your CSS to remove those gaps:

body {
  background-color: beige;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

this might be a really stupid question, but I recently started getting into web development again as a hobby, and I am trying to create a simple website to remember what I knew.

Unfortunately, I ran into a roadblock: I want a navigation bar that spans 100% of the page, but no matter what I try, there are still tiny margins to each side, like this:

The website

Right now, the relevant CSS looks like this:

  body {
    background-color: beige;
}

.navbar {
    background-color: black;
    overflow: hidden;
    margin: 0 0 1em 0;
    float: left;
    width: 100%;
    display: inline-block;
}

.navbar a {
    background-color: #dddddd;
    color: black;
    float: left;
    font-size: 24px;
    padding: 16px 16px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #777777;
    color: white;
}

.navbar a.active {
    background-color: coral;
    color: white;
}