CSS 元素没有正确放置答案

【问题标题】：CSS Element not properly placingCSS 元素没有正确放置
【发布时间】：2021-07-12 17:04:50
【问题描述】：

我已经在 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, 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文字**

【问题讨论】：

标签： css element placement

【解决方案1】：

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

要使其完全位于顶部和右侧（“塞入角落”），请尝试：

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

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

【讨论】：