谁能帮我弄清楚为什么我不能将我的粘性顶部导航栏更改为左侧？ CSS

Question

I wanted to change the position of my navbar on my portfolio but after many tries it just doesn't work for me, either it completely vanishes or stays in the same place. Could anyone look into the code and tell me what to modify? Down below I'm posting my code with top navbar.

css

body {
  margin: 0;
  width: 100%;
  font-family: "Quicksand", sans-serif;
  background: #dbdbdb;
  z-index: 1;
}

.container {
  font-weight: 750;
  width: 100%;
  color: white;
  background-color: #b3b3b3;
  z-index: 5;
  overflow: hidden;
  position: fixed;
  position: -webkit-sticky;
  top: 0px;
  margin-bottom: 20px;
  white-space: nowrap;
  top: 0;
  background-image: linear-gradient(bottom, #dbdbdb 2%, #b3b3b3 60%);
  background-image: -moz-linear-gradient(bottom, #dbdbdb 2%, #b3b3b3 60%);
}

header {
  background-color: #b3b3b3;
  z-index: 5;
}

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

.logo {
  float: left;
  padding: 10px 0;
  z-index: 5;
}
img {
  float: left;
  width: 90px;
  height: 70px;
  padding-top: 10px;
}
nav {
  float: right;
  top: 0;
  margin-right: 8%;
}

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

nav li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 23px;

  position: relative;
}

nav a {
  color: rgb(80, 80, 80);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 13px;
  display: inline-block;
}

nav a:hover {
  color: rgb(140, 140, 140);
}

nav a::before {
  content: "";
  display: block;
  height: 5px;
  background-color: rgb(140, 140, 140);

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

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

html

<header>
        <div class="container">    
            <nav>
              <ul>
                <li><a href="#history">.history</a></li>
                <li><a href="#">.aboutme</a></li>
                <li><a href="#">.skills</a></li>
                <li><a href="#">.aspirations</a></li>
              </ul>
            </nav>
          </div>
    </header>

I'd like to keep my hover animation but now come to think of it, the bar could be on the side now. I'll fix that myself.

Answer 1

If I understood correctly the problem just add the following to your css:

* {
  margin: 0;
}