I have a header as follow: logo + nav containing 4 links
I would like to arrange all this element next to each other at the top (that is working), but also to make them at equal distance of each other. The second part does not work, I don't manage to define the size of the a elements in % ...

I am using float:left to position all this element on top next to each other. I am using the css property width to make them occupy 20% each of the total top of the page.

```
<body>
    <header>
      <a href="./index.html" class="logo"><img src="mylogo.png" style="width:42px;height:42px"></a>
      <nav>
        <a href="./index.html" class="welcome active">Welcome</a>
        <a href="./about.html" class="about">About</a>
        <a href="./artwork.html" class="artwork">Art Work</a>
        <a href="./events.html" class="events">Events</a>
       </nav>
     </header>
     <h1>Title of the page</h1>
</body>

```

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

header {
    width: 100%;
}

.logo {
    float: left;
    width: 20%;
}

nav {
    float: left;
}

nav a {
    width: 20%;
}

```

There is some space between the logo and the links, but the links does not arrange along the top at equal distance, they stay stuck to each other... I suppose it's because their width is relative to nav, which is not 100% as there is the logo. But I don't know how to define the size of these a elements relatively to the header that I fixed to be 100% of my page?