html - 试图使我的 Fix 导航栏的内容在左侧，一个白框，但它不起作用？

Question

拜托，我需要一些帮助。我是编程新手，我正在努力解决这个问题。

我正在尝试用十六进制颜色 #66CD00 中的字母制作一个导航栏，该导航栏位于右侧并固定。它周围有一个白色 block ，紧随其后的是导航栏。但是当我尝试这样做时，要么背景颜色白色没有覆盖整个导航栏，要么“家庭、工作、关于”部分最终向左移动并且没有坚持到我想要的位置；在右边。

另一个问题是，当我向下滚动页面时，我的“主页、作品、简介”部分落后于我放置的一些图片。因此，如果有人也可以帮助我，我将不胜感激。

抱歉问了这么多。但我很努力，但还是卡住了。

有人可以帮我解决这个难题吗？我知道这看起来很傻，但我还没有在任何地方找到确切的答案。谢谢你的帮助。代码和指向我的代码笔的链接如下。

代码笔链接:https://codepen.io/JT_Cerqueira/full/YxOLxg/ (要可视化代码，只需单击以将 View 更改为编辑器 View 。)

CSS 和 HTML

/*==== the nav bar css goes below ==== */

.container {
  margin: 0;
  width: 80%;
}

header {
  color: #FFFFFF;
}

header::after {content: '';
               display: table;
               clear: both;
}

nav {
  position: fixed;
  right: 7%;
  top: 0;
}

nav ul {margin: 0;
        padding: 0;
        list-style: none;
}

nav li {display: inline-block;
        margin-left: 70px;
        padding-top: 50px;
        position: relative;
}

nav ul li a {
  color: #66CD00;
  text-decoration: none;
  font-size: 18px;
}

nav a:hover {
  color: #78AB46;
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  background-color: #444;
  
  position: absolute;
  top: o;
  width: 0%;
  
  transition: all ease-in-out 250ms;
  
}

nav a:hover::before {
  width: 100%;
}

<header>
   <div class="container">
    <nav> 
      <ul>
        <li><a href ="#home">Home<a></li>
        <li><a href ="#works">Works<a></li>
        <li><a href ="#about">About<a></li>
      </ul> 
    </nav>
  </div>  
 </header>

此外，如果有人愿意以任何方式做出贡献，我愿意重新制作我的导航栏或寻找其他来源并从头开始。

谢谢。

Answer 1

改这两个类就可以了

`

.container {
  margin: 0;
  padding: 0px;
  width: 100%;
}
nav {
  position: fixed;
  margin:0;
  padding:0;
  width:100%;
  background-color:white;
  z-index:99;
}

`