How to remove corner spacing in css? - css

Question

I am learning CSS while writing CSS I got some issue.
I need to remove this space from my displaying web page.
.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>Home</li>
<li>Home2</li>
<li>Home3</li>
<li>Home4</li>
<li>Home5</li>
</ul>
</figure>
</nav>
Using this code resultant output must be like this:
Expected Result Image
But getting this result with spaces at corner indicated as an arrow in next image:
Generated Result Image

Answer 1

1) There is some margin on ul element rendered by the browser defaults in general, to fix this do:
ul {
margin: 0
}
2) Also figure element has default margins
figure {
margin: 0
}
Try to inspect the output of the browser to see exactly how the browser defaults renders that margin to see it better.
https://jsfiddle.net/t8netg8j/4/

Answer 2

I would use display: inline-block for the image and the li elements, erase some of the floats and reset some of the margins to 0 as shown below:
(note: I reduced the width of the elements from 100 to 80 px to fit them into the narrow snippet window, but of course you don't have to do that for a wider viewport)
(note #2: i added empty HTML comments at line ends and beginnings for all li elements to avoid the whitespace resulting from the use of inline-blocks which would cause the hover background not to fill the full space between two vertical borders)
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>Home</li><!--
--><li>Home2</li><!--
--><li>Home3</li><!--
--><li>Home4</li><!--
--><li>Home5</li><!--
--></ul>
</figure>
</nav>