CODEWITHSUNDEEP
css
Mithunan Rajavarothayan
Mithunan Rajavarothayan

Reputation: 11

How to remove the gaps between the ul and anchor tags in the nav bar?

I create a nav-bar but when ever I hover over the links there is this gap between the ul and a:hover. I'm just trying to figure out how to remove the gap and make the hover cover the whole area.

I tried removing the padding for the ul but the hover just breaks its container and makes the ul smaller. I tried using the inspect tool on google chrome. It showing me that the padding for the ul is 1rem and a is 1rem but I don't understand where the gap is coming from. I've set the universal selector to include padding and margin be set to 0.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Karla&display=swap" rel="stylesheet">
    <title></title>
<style>
:root{
    --max-width: 1100px;
    --dark-color: #333;
    --light-color: #f3f3f3;
    --primary-color: #93cb52;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Karla', sans-serif;
    line-height: 1.5;
    background: var(--light-color);
}

a{
    color: black;
    text-decoration: none;
}

ul {
    list-style: none;
}

img {
    width:100%;
}

/*Utility*/

.container {
    max-width: var(--max-width);
    margin:auto;
    padding: 0 2rem;
    overflor:hidden;
}

,btn {
    display: inline-block;
    border: none;
    background: var(--dark-color);
    color: #fff;
    padding: 0.5rem 1.5rem;
}

.bg-dark {
    background: var(--dark-color);
}
/*Main-nav*/

#main-nav .container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;

}

#main-nav .container h1 {
    flex:2;
}

#main-nav ul{
  display: flex;
    justify-content:center;
    align-items: center;
    padding:1rem;
    background: white;
}

#main-nav ul li a {
     flex:1;
   padding:1rem;
    color: black;
}

#main-nav ul li a:hover{
    background: #333;
    color: #fff;
}
</style>
</head>
<body>
   <nav id="main-nav" class="bg-dark">
       <div class="container">
        <h1 class="header-logo">Experience</h1>
           <ul>
               <li><a href="index.html" class="current">Home</a></li>
               <li><a href="about.html">About</a></li>
               <li><a href="contact.html">Contact</a></li>
           </ul>
       </div>
   </nav>
</body>
</html>

I just want to know why there is a gap and how to remove it.

Upvotes: 0

Views: 112

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Remove lineheight from body and padding rightand leftfrom ul like,

#main-nav ul{
  display: flex;
    justify-content:center;
    align-items: center;
    padding:1rem 0rem;
    background: white;
}
body{
    font-family: 'Karla', sans-serif;
       background: var(--light-color);
}

Upvotes: 0

Ian Burns
Ian Burns

Reputation: 96

Your line-height attribute is to big for the height of the navbar. As a fix, just remove that attribute from this css tag:

body{
    font-family: 'Karla', sans-serif;
    /* line-height: 1.5; << Remove this guy */
    background: var(--light-color);
}

Here an example JSFiddle from your code with that change.

Upvotes: 1

Related Questions