Having some trouble aligning the items in my navigation bar. I plan to include some svg icons in the nav bar later on, but for now, I can't seem to get the alignment right. Any ideas?
It's probably a simple fix, but I've tried various methods like vertical align and others, but nothing seems to work as intended.
https://i.sstatic.net/GnqMR.png
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: #0f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.topnav a:hover {
color: #000;
}
.topnav a.active {
color: #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grundfos Metrics</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="./css/site.scss">
<script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
<header>
<div class="topnav">
<a class="floatLeft" href="#news"><h1>Website Title</h1></a>
<a class="floatRight" href="#contact">Coverage</a>
<a class="floatRight" href="#news">Archives</a>
<a class="active floatRight" href="#home">Home</a>
</div>
</header>
</body>
</html>