Listless HTML & CSS Nav bar - Can't get nav bar to expand with link padding

Question

Trying to develop a sans-list or listless nav bar with just links. I'm using the Nav Tag and a bunch of links, but I can't seem to get the 'nav' tag to expand correctly (height-wise) with the padding provided in the 'a' tag.

nav{
    background-color:midnightblue;
    width:100%;
}

nav > a:link {
    padding:5px;
    font-size:.8em;
    border-top:1px solid rgb(255, 255, 255);
    border-left:1px solid rgb(255, 255, 255);
    border-right:1px solid rgb(255, 255, 255);
    text-decoration: none;
    color:white;
    background-color:rgb(119, 119, 172);
    margin-right:.5em;
    transition: background-color 0.3s ease;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Contact</a>
</nav>

Answer 1

The easiest way is to following line to the css: nav { display: flex; flex-direction: row; }.

display: flex; makes the navbar to a flex-container. flex-direction: row; will make sure that the element are placed in a row not in a column like normal block elements.

EDIT: As correctly stated in the comments, it is the default behavior and can be left out.

nav{
    background-color:midnightblue;
    width:100%;
    display: flex;
    flex-direction: row;
}

nav > a:link {
    padding:5px;
    font-size:.8em;
    border-top:1px solid rgb(255, 255, 255);
    border-left:1px solid rgb(255, 255, 255);
    border-right:1px solid rgb(255, 255, 255);
    text-decoration: none;
    color:white;
    background-color:rgb(119, 119, 172);
    margin-right:.5em;
    transition: background-color 0.3s ease;
}

<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Work</a>
  <a href="#">Contact</a>
</nav>