CSS 元素未正确放置

问题描述

我已经重新输入了 HTML 和 CSS 代码，多次尝试将导航菜单移到右上角，它似乎只想移动到现在。我的错误在哪里？
重打几次后，我不确定我的错误可能在哪里，我迷路了！

MY CSS==============`
.nav-menu {
    margin-top: -450px;
    margin-left: 57%;
}

.nav-menu ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-menu li + li {
    font-size: 20px;
    margin-left: 30px;
}


.nav-menu a {
    display: block;
    position: relative;
    color: rgba(255,255,0.7);
    font-size: 16px;
    font-family: "poppins,sans serif";
    font-weight: 400;
}

/*-----before*/
.nav-menu a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #18d26e;
    visibility: hidden;
    width: 0;
    transition: all 0.3s ease-in-out 0s;

}

.nav-menu a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #18d26e;
    visibility: hidden;
    width: 0;
    transition:all 0.3s ease-in-out 0s;
}  

.nav-menu a:hover::before,.nav-menu li:hover > a::before,.nav-menu .active > a::before {
    visibility: visible;
    width: 25px;
}

这是我代码的 Html 部分：

<body>
  <!--==========Header===============-->
 <header id="header" class="header-tops">
   <div class="container">
       <h1><a href="index.html">Heather Harper</a></h1>
       <h2>Lorem ipsum dolor sit amet. <span>Lorem ipsum dolor sit amet.</span> from Detroit Michigan</h2>
  
                <!----social-link-->
       <div class="social-links">
           <a href="#" class="twitter"><i class="fab fa-instagram-square"></i></a>
           <a href="#" class="Facebook"><i class="fab fa-facebook-square"></i></a>
           <a href="#" class="instagram"><i class="fab fa-twitter-square"></i></a>
      </div>
      <nav class="nav-menu">
          <ul>
            <li class="active"><a href="#header">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#Resume">Resume</a></li>
            <li><a href="#Contact">Contact</a></li>
          </ul>
      </nav>
 </div>
   
  
 </header>

[![我的网页][1]][1]

[1]：https://i.stack.imgur.com/VLLVK.png**strong 文本**

解决方法

问题在于导航是相对于已经存在的事物放置的。

要将其完全移到顶部和右侧（“塞进角落”），请尝试：

.nav-menu {
    position: absolute;
    top: 0;
    right: 0;
}

当然，您需要添加一些边距或填充以使其远离角落。

element element placement