我今天开始在一个新的投资组合网站上工作.导航已经完成，现在我想从实际的网站开始，但我输入的所有内容都位于我的名字(徽标)上方
这就是我想要建造的:the idea 但事实是这样的:what comes out
如果您判断它，它会说整个导航部分都是html标记. 以下是代码:
a {
text-decoration: none;
font-weight: bold;
}
.nav-name {
font-size: 27px;
margin-left: 75px;
margin-top: 10px;
float: left;
}
.nav-item {
list-style: none;
float: right;
margin-left: 35px;
margin-right: 10px;
font-size: 18px;
}<!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">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<script src="https://kit.fontawesome.com/aab1cdc4fa.js" crossorigin="anonymous"></script>
<title>Floris M portfolio</title>
</head>
<body>
<header class="header-section" id="header">
<nav>
<div class="nav">
<a href="#" class="nav-name">Floris</a>
</div>
<ul class="nav-item">
<li class="nav-item">
<a href="#programs">My programs</a>
</li>
<li class="nav-item">
<a href="#projects">My projects</a>
</li>
<li class="nav-item">
<a href="#skils">Skills</a>
</li>
<li class="nav-item">
<a href="#about">About me</a>
</li>
<li class="nav-item">
<a href="#home">Home</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="home-section" id="home">
<div class="socials">
<a href="https://github.com/Floris29">
<i class="fa-brands fa-github fa-2xl"></i>
</a>
</div>
</section>
</main>
</body>
</html>我试着用</P>分来解决这个问题，但没有奏效.当我输入更多的文本时，我会在它下面出来，但也在同一行.我想try 的是它在不同的部分.