Как убрать угловой интервал в css?

Question

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

.grouping:before,
.grouping:after {
  content: " ";
  display: table;
}

.grouping:after {
  clear: both;
}

nav {
  background-color: white;
  position: fixed;
  top: 0px;
  right: 0px;
  left: 0px;
}

nav figure {
  position: absolute;
}

img {
  width: 100px;
}

.primary-nav {
  float: right;
}

.primary-nav>li {
  display: block;
  float: left;
}

.primary-nav>li>a {
  float: left;
  padding: 25px 0;
  width: 100px;
  border-left: 1px solid;
}

nav li a {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
}

nav li:first-child a {
  border-left: none;
}

nav li a:focus,
nav li a:hover {
  background: red;
  background-color: red;
}

body {
  background-color: grey;
}

<nav class="grouping">
  <figure>
    <img src="images/logo.png" alt="LOGO">
    <ul class="primary-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Home2</a></li>
      <li><a href="#">Home3</a></li>
      <li><a href="#">Home4</a></li>
      <li><a href="#">Home5</a></li>
    </ul>
  </figure>
</nav>

При использовании этого кода результирующий вывод должен быть таким: Ожидаемый результат Image Но получение этого результата с пробелами в углу, обозначенными стрелкой на следующем изображении: Сгенерированное изображение результата

Answer 1

Я бы использовал display: inline-block для изображения и элементы li, удалил некоторые поплавки и сбросил некоторые поля на 0, как показано ниже:

(примечание: я уменьшил ширину элементов со 100 до 80 пикселей, чтобы разместить их в узком окне фрагмента, но, конечно, вам не нужно делать это для более широкого окна просмотра)

(примечание № 2: я добавил пустые комментарии HTML в конце строки и начале для всех элементов li, чтобы избежать пробелов, возникающих в результате использования встроенных блоков, из-за которых фон при наведении не заполнить все пространство между двумя вертикальными границами)

html, body {
margin: 0;
}

nav figure {
  position: absolute;
  width: 100%;
  margin: 0;
}

img {
  width: 80px;
  display: inline-block;
}

.primary-nav {
  float: right;
  margin: 0;
}

.primary-nav>li {
  display: inline-block;
}

.primary-nav>li>a {
  float: left;
  padding: 25px 0;
  width: 80px;
  border-left: 1px solid;
}

nav li a {
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  text-transform: uppercase;
  font-size: 15px;
  text-align: center;
}

nav li:first-child a {
  border-left: none;
}

nav li a:focus,
nav li a:hover {
  background: red;
  background-color: red;
}

body {
  background-color: grey;
}

<nav class="grouping">
  <figure>
    <img src="images/logo.png" alt="LOGO">
    <ul class="primary-nav">
      <li><a href="#">Home</a></li><!--
      --><li><a href="#">Home2</a></li><!--
      --><li><a href="#">Home3</a></li><!--
      --><li><a href="#">Home4</a></li><!--
      --><li><a href="#">Home5</a></li><!--
    --></ul>
  </figure>
</nav>

Answer 2

1) В элементе ul, отображаемом браузером, есть некоторое поле по умолчанию, чтобы исправить это:

ul {
    margin: 0
}

2) Также элемент figure имеет поля по умолчанию

figure {
        margin: 0
    }

Попробуйте проверить выходные данные браузера, чтобы увидеть, как именно браузер по умолчанию отображает это поле, чтобы лучше его увидеть.

https://jsfiddle.net/t8netg8j/4/