I can't seem to get the href buttons to align properly in the header. I tried adjusting the margin-top, but it didn't work as expected. Being a beginner in CSS, I'm unsure of what code to use next. Any help would be greatly appreciated.
Also, I forgot to mention that I would like the buttons to be vertically centered within the header.
styles.css
body {
margin: 0;
padding: 0;
}
header div, main {
max-width: 100%;
margin: 0 auto;
padding: 0 1em 0 1em;
}
header {
background: #d000c2;
width: 100%;
height: 40px;
position: absolute;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header h1 {
float: left;
margin-top: 0px;
}
main {
padding: 21;
}
header a {
margin-top: -14px;
text-decoration: none;
color: white;
}
header li {
text-transform: uppercase;
display: inline;
margin-right: -14 px;
margin-top: 0 px;
font-family: Helvetica;
font-size: 24px;
z-index: 11;
}
header a:hover {
border-top: 3px cyan;
border-style: solid;
border-bottom: 0px white;
border-right: 0px white;
border-left: 0px white;
}
header li a:hover {
color: cyan;
}
header ul {
float: right;
list-style-type: none;
padding-top: 1em;
}
#vid {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
background-size: cover;
z-index: -1;
}
@media only screen and (max-width: 520px) {
header {
text-align: center;
position: relative;
}
main {
padding: 14 px;
}
header h1 {
float: none;
margin: 0;
}
header ul {
float: none;
margin: 0;
}
}
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link href="./css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<div>
<h1><img src=""></h1>
<ul>
<li><a href="#">home</a></li>
<li> </li>
<li><a href="">log-in</a></li>
<li> </li>
<li><a href="">contact</a></li>
<li> </li>
<li><a href="">test</a></li>
</ul>
</div>
</header>
<main>
<video autoplay loop id="vid">
<source src="./videos/background.mp4" type="video/webm">
</video>
</main>
</body>