Hover background not cover the entire height of the nav link items

HTML-CSS
1

HI CAMPERS;
(don’t know if this is the right channel to create my topic but I couldn’t find the channel for front-end help)
I am working on this page but when I add the hover background-color to the nav-list items/links, it doesn’t fill the full height/background of the link.
please help me check what I might be doing wrong.

HERE’S MY CODE:

#header{

 background-color: #0a0a23; 
color: #f1f1f1;
 display: flex;
 justify-content: left;
}

#header ul{
 list-style: none;
margin-left: 250px;
}

#header li{
display: inline;
 padding: 0;
}

#header a{
text-decoration: none;
color: #f1f1f1;
padding-top: 6px;
padding-right: 25px;
font-size: 20px;
 float: right;
text-align: center;
}

#header a:hover{
color: #0a0a23;
background-color: #f1f1f1;
}
HTML:
<div id="header">
     <input type ="text" class="search" placeholder= "Search 6,000+ tutorials">
     <h1>freeCodeCamp</h1>
<div id="nav">
    <ul>
<li><a href="profile">Profile</a></li>
<li><a href="curriculum">Curriculum</a></li>
<li><a href="menu">Menu</a></li>
               </ul>
       </div>
</div>
2

@ugoamaka hey,

Whenever you color the background it will only color the padded areas so in your case only 6px at the top and 25px to the right will be coloured, you should change it to padding: 25px;.

I made a codepen that you can checkout

3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
4

Yay…It works perfectly fine now. I had to make it:- padding: 8px; to suite my need. Thanks for your help. Learnt something new today.

1 Like
5

Thank you for the info. Have always wondered how people come about the code editor text areas on channels.