As I dive into the world of CSS, I encountered an issue while working on my webpage. The problem lies in a space that appears on my displayed webpage.
.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>My goal is to have the output match the Expected Result Image, but unfortunately, what I'm seeing is different with spaces at the corners as indicated by the arrows in the image here: Generated Result Image