HTML background not taking up entire screen space

Question

I am trying to recreate this simple portion of a website using html just for practice:

Here is my html code for it so far:

<!DOCTYPE html>
<html>
<head>
<style>
.green{
   color:lightgreen;
}

ul{
   background-color:lightgray;
   display:inline;
   padding:10px;
}

li{
   background-color:lightblue;
   color:light-gray;
   display:inline;
   margin:20px;
}

a:hover{
   color:orange;
}

a{
   text-decoration:none;
}
</style>
</head>

<body>

<h3 class="green">Display Inline-Block Demo</h3>
<ul>
   <li><a href="#">HTML</a></li>
   <li><a href="#">CSS</a></li>
   <li><a href="#">Result</a></li>
</ul>

</body>

</html>

The main problem I am having is that when I run my html code in the w3school html text editor (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default), the gray background under the "HTML", "CSS", and "RESUlT" text is only taking up a portion of the screen space instead of going all the way to the edge of the screen. This is the output I am getting with my code above (also the right side of the picture below is all white space):

Is there any way I can make that gray background span out to the entire screen? Thank you so much for the help in advance!

Actually I just realized I can add a padding value to my ul CSS class selector and just say padding:300px; Is this a correct approach? Because it will still look different on various screen sizes. — , Jul 23 '15 at 05:11

score 3 · Answer 1 · edited May 23 '17 at 11:51

3

Change the displays of the ul and li to make the grey ul span the whole width:

ul{
   background-color:lightgray;
   display:block;
   padding:10px;
}

li{
   background-color:lightblue;
   color:light-gray;
   display:inline-block;
   margin:20px;
}

Also, there's a good discussion here on block vs inline vs inline-block: CSS display: inline vs inline-block

edited May 23 '17 at 11:51

Community

1
1

answered Jul 23 '15 at 05:10

mongjong

479
3
6

Perfect! Thank you so much for that suggestion! I don't know why that didn't pop up in my head before. I just added a line in the ul that said display:block; That is what you meant correct? – Jul 23 '15 at 05:12
Yep. Replace the two display lines in the css with the above. Have a read of that link to get a better understanding of the differences between blocks, inline and inline-blocks. – mongjong Jul 23 '15 at 05:15
Ok! Thank you so much for the help! – Jul 23 '15 at 05:19

score 1 · Answer 2 · edited Jul 23 '15 at 05:17

<!DOCTYPE html>
<html>

<head>
  <style>
    .green {
      color: lightgreen;
    }
    ul {
      background-color: lightgray;
      display: inline-block;
      padding: 10px;
      width: 100%;
      margin: 0px;
    }
    li {
      background-color: lightblue;
      color: light-gray;
      display: inline-block;
      margin: 20px;
    }
    a:hover {
      color: orange;
    }
    a {
      text-decoration: none;
    }
  </style>
</head>

<body>

  <h3 class="green">Display Inline-Block Demo</h3>
  <ul>
    <li><a href="#">HTML</a>
    </li>
    <li><a href="#">CSS</a>
    </li>
    <li><a href="#">Result</a>
    </li>
  </ul>

</body>

</html>

score 1 · Accepted Answer · answered Jul 23 '15 at 05:16

1

Simply you can remove display:inline for ul tag.

ul{
   background-color:lightgray;
   padding:10px;
}

fiddle:https://jsfiddle.net/kw8kv7vr/

answered Jul 23 '15 at 05:16

Shrinivas Pai

7,491
4
29
56

@ClayHorder yes it is. Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul – Shrinivas Pai Jul 23 '15 at 05:21
OK! Thank you so much for the help! – Jul 23 '15 at 05:22

HTML background not taking up entire screen space

3 Answers3