CSS CSS Layout Basics Controlling Layout with CSS Display Modes Using Inline-Block to Set Width, Height, Top and Bottom Margin and Padding

"name" class does not have a full, clickable box like the "main-nav li" items.

https://w.trhou.se/9je2c44k7d

Above is my code. In the video, Guil states that, by changing the display value to "block", my .name and .main-nav would have a box that is almost entirely clickable.

My nav links follow this behavior, but not the .name class. Any idea why?

1 Answer

Steven Parker
Steven Parker
203,989 Points

On lines 63-67 in styles.css you have:

.name,
.main-nav a {
    padding: 10px 15px;
    display: block;
}

This targets the anchors (a) in the list, but the header (h1) for name.

:point_right: Change line 63 to: ".name a,".

You could also replace both lines 63 and 64 with: ".container a {".

-_- geez..

Thanks so much Steven! It kills me that I didn't catch it the first time(s) around.