Help me with css

[dima1337]

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
It’s my own test-project.

<In what way does your code behave incorrectly? Include ALL error messages.>

``` This is HTML code: TestPage

Something1

        <span class="navitem">
           <a href="#">Something2</a>
        </span>
        
        <span class="navitem">
           <a href="#">Something3</a>
        </span>
        
        <span class="navitem">
           <a href="#">Something4</a>
        </span>
    </div>
</div>

   <div class="main">
    <div class="pagebody">
        <p>Hi</p>
    </div>
</div>
</div>

This is CSS:

.navitem{
text-transform: uppercase;
font-size:20px;
text-align:center;
width:160px;
display:inline-block;
padding-top:8px;
margin-left: 50px;
margin-right:50px;

}

a{
text-decoration: none;
}
.header{
width:80%;
height:50px;
background-color: black;
padding-top:10px;
margin-left:10%;
position:fixed;

}
.navitem a{
color:white;
}
#navigation{
text-align:center;
}
body{
background-color:white;
}
.pagebody{

}
.main{
width:80%;
height:200px;
margin-left:10%;
background-color:red;
margin-top:55px;
}

It should be two lines of equal length, one below the other but it’s not. Why?

<do not remove the three backticks above>

[stetim94]

@dima1337

It should be two lines of equal length

What does it refer to? In such cases, it is best to not use reference names (like it), but instead class or id name of the elements, so we have a better idea what we have to look for you, unlike you, we don’t have an idea of how the end result should look

[dima1337]

Result should look like this:

[dima1337]

instead of this:

[stetim94]

the header is fixed, so the only way to make the width the same is by removing margin from al parents:

body { margin: 0; }

if you wand the element below your header, give it a margin top with the same value of height of you header