CODEWITHSUNDEEP
htmlcss
Stanimirovv
Stanimirovv

Reputation: 3172

header stretches instead of

To make a long story short, the header class should be a black line across the entire screen. In HTML it will be a list. The list's children will be styled as buttons and should begin after the first 20% of the page. Somewhere along the line this is going terribly wrong, because:

  1. The list children aren't styled at all (the margin)

  2. The page stretches itself a lot.

Here is the entire source code:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
    html, body {
         padding: 0;
         background-color:#FFFCF2;
         margin: 0 auto;
         }

        .header {
          list-style:none;  
        width:100%;
        height:65px;
        font-size:3%;   
        background: black;
         }

        .header:first-child {
        margin-left:20%;
        }

    .headerChild {
        margin-left:0;
        float:left;
         height:65px;
         width:10%;
         background: white;
    }   
    </style>
</head>
<body>
         <ul class="header">
        <li class="headerChild"></li>
        <li class="headerChild"></li>
        <li class="headerChild"></li>
        </ul>
</body>
</html>

Upvotes: 0

Views: 52

Answers (2)

emgee
emgee

Reputation: 520

A few issues that I see:

  • .header:first-child is applied to the <ul>, so change it to .header>li:first-child and that will target the first <li> and set its left margin
  • You set your font size to 3% in .header and the <li> inherit that, make sure that is what you want
  • set padding:0 on .header as well to prevent the horizontal scrollbars.

Here's a Fiddle for you to look at. I've put red borders around the <li> and text so you can see them.

Upvotes: 0

Fabio S
Fabio S

Reputation: 1122

Replace your CSS with the following:

html, body {
     padding: 0;
     background-color:#FFFCF2;
     margin: 0 auto;
}

.header {
    list-style:none;  
    width:100%;
    height:65px;
    font-size:3%;   
    background: black;
    padding-left: 20%;
}

.header:first-child {       
}

.headerChild {
    margin-left:0;
    float:left;
     height:65px;
     width:10%;
     background: white;      
}

Upvotes: 1

Related Questions