My header consists of a logo and navigation with 4 links. I want to align these elements next to each other at the top, which is working fine. However, I am struggling to make them appear at an equal distance from each other.
To position all these elements on top next to each other, I am using float:left. I am also using the CSS property width to ensure that they each occupy 20% of the total page width.
<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%;
}
While there is some space between the logo and the links, the links do not align along the top at an equal distance; they seem stuck together. It seems like their width is relative to the nav element, which is not taking up the full 100% due to the presence of the logo. I am unsure how to set the size of these 'a' elements relative to the header, which I have fixed to be 100% of the page's width.