Зум браузера ломает мою вертикальную панель навигации

Question

У меня проблема, связанная со встроенным в браузер зумом (ctrl + scroll). Я собираюсь построить сайт с вертикальной панелью навигации вдоль левой стороны, что является довольно стандартным материалом... Все выглядит хорошо с листообъектами, разделенными "border-bottom: 1px solid black". Листобъекты идеально расположены внизу родительского элемента div.

Это до тех пор, пока я не начну проверять свою страницу с помощью браузера. Затем граница в нижней части последнего объекта listobject "спрыгивает" на ступеньку ниже и помещается ниже родительского элемента div... И если я продолжу увеличивать масштаб, сайт немного неудержимо скачет.

У кого-нибудь есть решение этого? (Вставка моего кода ниже)

* {
 margin: 0;
 padding: 0;
}

body {
 background-color: lightblue;
}

div#wrapper {
 width: 1300px;
 height: 600px;
 border: 1px solid black;
 margin: 20px auto 0px auto;
}

div#header {
 width: 100%;
 height: 100px;
 border-bottom: 1px solid black;
 background-image: url(".././bilder/headerBG.jpg");
}

div#header > h1 {
 color: white;
 padding-top: 15px;
 text-align: center;
 font-size: 55px;
 font-family: Algerian, "Times New Roman";
}

div#navbar {
 width: 300px;
 height: 500px;
 border-right: 1px solid black; 
}

div#navbar > ul {
 text-align: center;
}

div#navbar > ul > li {
 list-style-type: none;
 border-bottom: 1px solid black;
 font-size: 25px;
}
  
div#navbar > ul > li > a {
 color: black;
 text-decoration: none;
 display: block;
 box-sizing: border-box;
 width: 100%;
 padding: 35.5px 0;
}

div#content {
 width: 1000px;
 height: 500px;
 float: right;
}

div#footer {
 width: 1300px;
 height: 50px;
 margin: 0px auto;
 border-left: 1px solid black;
 border-bottom: 1px solid black;
 border-right: 1px solid black;
 clear: both;
}

      <div id="wrapper">
   <div id="header">
    <h1>Hello DIV</h1>
   </div>
   <div id="navbar">
    <ul>
     <li><a href="#">Start</a></li>
     <li><a href="#">About</a></li>
     <li><a href="#">Vision</a></li>
     <li><a href="#">Services</a></li>
     <li><a href="#">Contact</a></li>
    </ul>
   </div>
   <div id="content">
    
   </div>
  </div>
 
        <div id="footer">
    
  </div>

Answer 1

Привет, я только что проверил ваш Css и проблемы из-за высоты, заданной следующим div:

#wrapper & #navbar 

Есть пустой div, называемый #content из-за которого вы видите выемку, которая идет вниз!! Чтобы избежать этого, удалите высоту из #content тоже