我的代码表示0边距。我可能错过了一些明显的东西但如果有人能告诉我我做错了什么会有很大的帮助。将鼠标悬停在右侧的每个元素上,您可以看到每个元素之间有一个小空间。如何修改我的代码以便他们触摸?
* {
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>