Размер верхней границы баннера?

Question

так что я немного запутался в части своего кода и почему он не работает? Верхняя граница заголовка с навигационными кнопками, которые направляют пользователя в разные места на сайте. Я пытаюсь сделать экран подгонки по ширине, и по какой-то причине есть небольшой промежуток, когда черная полоса не заполняет верхнюю левую.

Код указан ниже:

#top-menu-conainer2 {
  height: 20px;
  background: #000000;
  width: 4000px;
}

#top-menu-item2 {
  width: 4000px;
  margin: 0 auto;
}

#top-menu-item2 li a {
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

#top-menu-item2 li a:hover {
  text-decoration: underline;
}

#top-menu-item2 li a.bolder_link {
  font-weight: 700;
}

.top-menu-item2 {
  float: left;
  font-size: 12px;
  padding-top: 2px;
  padding-left: 30px;
  letter-spacing: 1px;
  line-height: 15px;
  padding-right: 8px;
}

.top-menu-item2 li a:hover {
  text-decoration: underline;
  color: #F8F9FA;
}

#header-details {
  margin: 0 auto;
  background-color: #000000;
  width: 100%;
  max-width: 5000px;
  height: 20px;
  border-left: 600rem;
  border-right: 600rem;
}

@media screen and (max-width:850px) {
  .top-menu-container2 {
    display: none !important;
  }
}

@media screen and (max-width:850px) {
  .top-menu2 {
    display: none !important;
  }
}

@media screen and (max-width:2000px) and (min-width:850px) {
  .mobile-menu2 {
    display: none !important;
  }
}

<!--Start Test Code For NEW banner-->
<div id="top-menu-container2">
  <div class="top-menu-item2">
    <div class="top-menu2" id="top-menu2">
      <div class="top-menu-item2">
        <li><a href="index.asp" title="Home Page" class="bolder_link" style="color:#FFFFFF">Home</a></li>
      </div>
      <div class="top-menu-item2">
        <li><a href="aboutus.asp" title="About Us" class="bolder_link" style="color:#FFFFFF">About Us</a></li>
      </div>
      <div class="top-menu-item2">
        <li><a href="gallery.asp" title="Gallery" class="bolder_link" style="color:#FFFFFF">Gallery</a></li>
      </div>
      <div class="top-menu-item2">
        <li><a href="brochures.asp" title="Brochures" class="bolder_link" style="color:#FFFFFF">Brochures</a></li>
      </div>
      <div class="top-menu-item2">
        <li><a href="testimonial.asp" title="Testimonial" class="bolder_link" style="color:#FFFFFF">Testimonial</a></li>
      </div>
      <div class="top-menu-item2">
        <li><a href="checkout.asp?action=login.asp" title="Log-In/Sign-Up" class="bolder_link" style="color:#FFFFFF">Login/Sign-Up</a></li>
      </div>

      <div style="background-color: #000000">
        <div id="header-details">


          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Test Code for NEW banner-->

Answer 1

body {
  margin: 0;
}


#top-menu-conainer2{
  background: #000000;
}

.top-menu-item2{
  padding: 0 !important;
}

#top-menu-item2 li a{
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
}

#top-menu-item2 li a:hover{
  text-decoration: underline;
}

#top-menu-item2 li a.bolder_link{
  font-weight: 700;
}

.top-menu-item2 {
  float: left;
  font-size: 12px;
  padding-top: 2px;
  padding-left: 30px;
  letter-spacing: 1px;
  line-height: 15px;
  padding-right: 8px;
}

.top-menu-item2 li a:hover{
  text-decoration: underline;
  color: #F8F9FA;
}

#header-details{
  margin: 0 auto;
  background-color: #000000;
  width: 100%;
  max-width: 5000px;
  height: 20px;
  border-left: 600rem;
  border-right: 600rem;
}
@media screen and (max-width:850px){
  .top-menu-container2{
     display:none !important;} 
   }
@media screen and (max-width:850px){
  .top-menu2{
    display:none !important;
  } 
}

@media screen and (max-width:2000px) and (min-width:850px){
  .mobile-menu2 {
     display: none !important;
   }
}

Улучшения в именовании и использовании классов вместо идентификаторов