2. Laying Out Your Divs problem with display: block!



Hi! I have a problem with navigation bar. Whatever I do, I can't make the whole link area clickable!

Display: block; doesn't react. I tried to put it in .header li a, .header a, .header ul li a, .header li (in a lesson,

)... nothing works! When I hover over links, or click on them, only area that covers letters gets white. The rest of the space doesn't change the color. I pasted the code in Chrome from Firefox, thinking that maybe Firefox doesn't support it. Chances for that were poor, and I was right! Didn't work there, neither!

Maybe I gave wrong value to property in some other element, so it's blocking this value, I don't know.

Now I deleted display: block from all the elements I tried with, so you could have a clear view on where it has to be.

Thank you in advance!

body {
    background-image: url(https://www.srbijadanas.com/sites/default/files/a/t/2014/05/06/macici-sisaju.jpg);

.header {
    background-color: rgba(225, 146, 146, 0.8);
    border: 5px solid rgb(220, 111, 111);
    border-radius: 7px;
    height: 50px;
    width: 99%;
    position: fixed;

.header li {
    display: inline;
    border-right: 2px solid rgb(220, 111, 111);
    float: left;
    padding: 15px;

.header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
.header a {
    text-decoration: none;
    color: rgb(95, 1, 1);
    font-size: 20px;

li a:hover {
    background-color: white;


Try adding some padding to your anchor tags in nav bar :slight_smile:


Haha! I gave them all classes! It was easier to my brain not to read everything!


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.