Tea Cozy Project - Margins of Header items

Hi,

I’ve been trying to figure this out and checking through the forums for an answer but I can’t figure out this part of the header for the project.

There is a logo on the left that gives a nice space to the edge of the browser if we give it a margin of 10px. However, for the <li> navigation items on the right, if we were to put a margin of 10px, it goes right to the edge of the browser and it takes a margin of 20px to create some space between the item and the edge of the browser. Can anyone tell me why is this so?

Below are my code files. I hope I’m making sense here.

<!DOCTYPE html>
<html>
  <head>
    <title>Tea Cozy</title>
    <link href="styles1.css" type="text/css" rel="stylesheet">
  </head>

  <body>

    <!-- Header -->
      <nav class="header">
        <img class="logo"src="https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-tea-cozy-logo.png">
        <ul>
          <li>Mission</li>
          <li>Featured Tea</li>
          <li>Locations</li>
        </ul>
      </nav>
html {
    font-family: Helvetica, sans-serif;
    font-size: 22px;
    color: seashell;
    background-color: black;
    opacity: 0.9;
    text-align: center
}

.header {
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    height: 69px;
    width: 100%;
    border-bottom: 1px solid seashell;
    position: fixed;
}

.header .logo {
    padding: 0;
    margin: 10px;  --------> margin of 10px to not let it sit at the edge of the browser. 
    height: 50px;

}

.header li {
    display: inline;
    text-decoration: underline;
    margin-right: 20px;     ----------> Why is it that a margin of 10px puts the logo nicely in place 
                                                            but a margin of 10px puts the last <li> item right at the 
                                                           edge of the browser? 
}