Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Abe Layee
Abe Layee
8,378 Points
Posted by Abe Layee
Abe Layee
8,378 Points

:hover is not covering the whole nav li text why is that?

When I hover over the li element on my website, the hover does not cover the whole nav li text. What am I doing wrong here? Here is my code

<body>
      <header class="main-header">
        <ul class="main-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
         <section class="more">
           <p>Abraham Swaray<span class="down"><h3>Junior Front End Developer</h3></span></p>
         </section>
      </header>

html{
    width:100%;
    height:100%;
    -webkit-box-sizzing:border-box;
    -ms-box-sizzing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

*{
  -webkit-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body{}

/***********************Main-Header,logo,navigation*********************/

.main-header {
    -webkit-background:linear-gradient(to bottom,#e74c3c,transparent 50%),url('../img/beach.jpg') no-repeat center center fixed;
    -ms-background:linear-gradient(to bottom,#e74c3c,transparent 50%),url('../img/beach.jpg') no-repeat center center fixed;
    -moz-background:linear-gradient(to bottom,#e74c3c,transparent 50%),url('../img/beach.jpg') no-repeat center center fixed;
    background:linear-gradient(to bottom,#e74c3c,transparent 50%),url('../img/beach.jpg') no-repeat center center fixed;
    height:100vh;
    background-size:100%;
}

.main-nav {
    text-align:right;
    background:#2c3e50;
    height:50px;
    line-height:3;
    width:100%;
    border-top:2px solid  #141c24;
    border-bottom:2px solid #141c24;
}


.main-nav li {
    display:inline-block;
    margin:0 10px;
    list-style: none;
    width:90px;
}

.main-nav li:hover {
    background:#507192;
    color:#fff; //bug problem here.
}

.main-nav a {
         text-decoration:none;
         color:#fff;
}

.more {
    position: relative;
    text-align:center;
    top:50%;
    left:50%;
   -webkit-transform:translate(-50%,-50%);
   -moz-transform: translate(-50%,-50%);
   -ms-transform: translate(-50%,-50%);
   -o-transform: translate(-50%,-50%);
   transform: translate(-50%,-50%);
}

.down  {
    display:block;

}


.more p {

    color:#fff;
}

.more h3 {
    font-weight:normal;
    font-size:1.5em;
    margin-top:30px;
    color:#fff;
}

.box {
    text-decoration:none;
    display:inline-block;
    width:120px;
    margin:0 auto;
    background:#000;
    color:#fff;
    padding:15px;
    border-radius:5px;
    margin-top:20px;
}

.box:hover {
    background:crimson;
    color:#fff;
}
Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

Could you elaborate the problem? What is :hover currently doing and how should it act?

5 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I see your issue. You have coded everything correctly. What is happening is that you have text align right for your nav on line 33. Thus, your hover highlight is on the entire element, but the lettering is shifted to the far right side. It is often helpful to add a border to see where your elements are actually located when you have a problem like this.

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

I don't think the -ms and -webkit prefixes change the box-sizing name to box-sizzing. You might fix that and try again.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

I just fix the spelling typo. Still not covering the whole text in the nav

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

will you send a fork snapshot so I can play with the code?

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

alright, I am going try and do it with codepen since I don't know how to use that. Here is my code pen http://codepen.io/anon/pen/ZGvQdO

Colton Ehrman
Colton Ehrman
Courses Plus Student 5,859 Points

I don't see any errors, and I'm not really sure on what you're wanting it to do, but it's doing what it should. When you hover it is changing the background color, and the font-color stays the same cause color: #fff is white which it is already white

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

I just align the nav li to center and is working correctly . so I do fix the right bug issue.

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

It is not really a bug. It was just doing exactly what you told it to do but you didn't realize that. You have a layout decision to make on how you want your page to look. Do you want it centered or aligned right? Do you want to use a hover to change the background? Or maybe you should change the text color on hover. It is all style choices you get to make so it looks and performs the way you want.

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

thank you Ted Sumner for your feedbacks . I appreciate it.