My code indicates for 0 margins. I'm probably missing something obvious but it would be of great help if someone could tell me what I'm doing wrong. Hover over each of the elements on the right, and you can see that there's a small space in between each one. How can I modify my code so that they are touching?
* {
margin: 0;
padding: 0;
}
.nav > ul > li, .nav > ul > li> a {
display: inline-block;
padding: 10px 15px 10px 15px;
color: #ffffff;
font-family: Roboto Slab;
font-size: 14px;
text-decoration: none;
transition: background-color .25s;
}
.nav > ul > li:hover {
background-color: #333333;
}
.nav > ul {
text-align: right;
list-style: none;
}
.nav {
background-color: #111111;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav > .title > p > a {
color: #ffffff;
font-size: 22px;
font-family: Roboto Slab;
padding-left: 25px;
text-decoration: none;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<script rel="javascript" src="Website.js"></script>
<link type="text/css" rel="stylesheet" href="Website.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab|Roboto+Slab:bold|Bree+Serif">
</head>
<body>
<div class="nav">
<div class="title">
<p><a href="">Kinsey's Blog</a></p>
</div>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Forums</a></li>
<li><a href="">Contact</a></li>
</ul>
</div>
</body>
</html>