尝试制作自定义导航栏

Question

我正在尝试制作自定义导航栏。我知道我可能不会以最整洁的方式绕过它，但我对此很新，所以当我按照我想要的方式工作时，我可以继续清理它。我正在使用bootstrap而不是bootstrap navbar，我试图在css中创建它。我遇到的问题（我相信还有更多！）是我希望它没有固定的左右边距。我希望有一个最小值，但如果浏览器变大或变小，我会调整。因为它固定在左右两侧的一定范围内。我是否需要使用媒体查询执行此操作或只是坚持引导程序集大小？

代码非常简单，只能在桌面或.md上使用或显示。

任何帮助都会很棒。

html是：

<div class="container-fluid f2p-nav hidden-xs hidden-sm">
<ul>
<li><div class="image-container-left left"><img src="images/test-logo.png" /></div></li>
  <li><a href='test.php' class='btn btn-login left-spacer' role='button'><span id="img-logo"></span>  test </a></li>
  <li><a href='test.php' class='btn btn-login' role='button'><span id="img1-logo"></span> test </a></li>
  <li><a href='test.php' class='btn btn-login' role='button'><span id="img2-logo"></span> test </a></li>
  <li><a href='test.php' class='btn btn-login' role='button'><span id="img3-logo"></span> test </a></li>
  <li class=right><a href='test.php' class='btn btn-login' role='button'><span id="img4-logo"></span> test </a></li>
</ul>
</div>

和css是：

li {
    border:0;
    list-style-type: none;
    height:72px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #00a4ff;
}


li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: #49bdfe;
        color: white;
}


.f2p-nav {
    background-color: #00a4ff;
    height: 72px;
    color: white;
}

.image-container-left {
  display: flex;
  margin-left:30px;
  margin-top:12px;

}

.btn-login {
font-family: 'Heebo', sans-serif;
  font-size: 13pt;
  font-weight: 700;
  color: #fff;
  background-color: #00a4ff;
  border: 0;
  border-radius:0;
  height:72px;
  vertical-align: middle;
  text-align:center;
  line-height:64px;
  transition: all 0.2s ease 0s;
}

.glyth {
  line-height:64px;
  }

.btn-login:hover {
    background: #49bdfe;
    }

#login-logo
{ 
   background:url(images/test.png) left top; 
   width:32px; 
   height:32px;
   float: left;
   margin-top:13px;
   padding-left:0;
   margin-right:10px;
}

#auction-logo
{ 
   background:url(images/test.png) left top; 
   width:32px; 
   height:32px;
   float: left;
   margin-top:13px;
   padding-left:0;

}

#register-logo
{ 
   background:url(images/test.png) left top; 
   width:32px; 
   height:32px;
   float: left;
   margin-top:15px;
   padding-left:0;
}

#about-logo
{ 
   background:url(images/test.png) left top; 
   width:32px; 
   height:32px;
   float: left;
   margin-top:15px;
   padding-left:0;
}

#contact-logo
{ 
   background:url(images/test.png) left top; 
   width:32px; 
   height:32px;
   float: left;
   margin-top:15px;
   padding-left:0;
}

.right {
padding-right:30px;
float:right;
}

.left {
margin-left:30px;
text-align:left;

}

.left-spacer {
margin-left:30px;

}
.glyphicon {
vertical-align: -2px
}