Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciated.
@font-face {
src:url(fonts/Staatliches-Regular.ttf);
font-family: rust;
}
*{
margin-top: 0px;
margin-bottom: 0px;
font-size: 30px;
text-align: center;
font-family: rust;
}
body{
background-color: #6588AB;
}
#sad{
font-style: italic;
}
nav{
margin-top: 0px;
margin-bottom: 0px;
width: 100%;
height: 100px;
background-color: #fff;
}
ul{
margin: 0;
padding: 0;
}
ul li{
display: block;
list-style: none;
display: inline;
line-height: 100px;
}
ul li a{
text-decoration: none;
color: #1e1e1e;
background-color: #fff;
padding: 30px 100px 30px 100px;
}
ul li a:hover{
color: red;
}<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
<meta charset="UTF-8">
<link rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id = "link">
<ul>
<li><a href="pain.html" target="_blank">about me</a></li>
<li><a href="https://www.youtube.com/watch?v=p_9e0_Fdaek" target="_blank">what i do</a></li>
<li><a href="https://www.youtube.com/watch?v=X1u-9YqrIJc" target="_blank">why i'm based</a></li>
<li><a href="https://www.youtube.com/watch?v=7w9hK8mh9-g" target="_blank">contact me</a></li>
</ul>
</nav>
<h1 class = "pog">hello!!!</h1>
<h2 class = "pog" id ="sadge" title="pog u">pog</h2>
</body>
</html>