当屏幕宽度小于CSS时，如何使导航栏中的列表元素不向下移动

大家好，我做了一个导航栏，但是当浏览器宽度减小时，它会逐个向下移动列表的元素。我不希望这种情况发生，因为我希望导航栏在所有尺寸的屏幕上都看起来不错。这是我的导航栏代码。谢谢。

  background: #802EB3;
  background-image: var(--gradient);
  background-size: 170%;
  animation: bg-anim 4s infinite alternate;
}

@keyframes bg-anim {
  0% {background-position: left;}
  100%{background-position: right;}
}

header::after{
  content: "";
  display: table;
  clear: both;
}
.svg{
  padding: 40px 0;
  width: 3%;
  height: 3%;
  color: aliceblue;
  float: left;
}
nav{
  float: none  ;
}

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

nav li {
  display: inline-block;
  margin-left: 200px;
  padding-top: 45px;

  position: relative;

  left: -35px;
}

nav a{
  color: aliceblue;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 120%;
}