layout help

[kiwis]

Here is my simple header HTML

My issues are, my unordered list sits of centre, it seems to have a margin still and if I made logo 400px I can’t make my list 800px and have both sit inline in the container of 1200px.

Why?

Airline Name

• Aicraft
• Routes
• Marketing
• Operations

.header{
width: 100%;
height:100px;
background-color: rgb(54, 171, 203);
position:fixed;
left:0px;
top:0px;
box-shadow: 0px 1px 8px 5px #3b3b3b;
}

.header .inner-container{
width: 1200px;
margin: 0px auto;
}

.header ul{
display: inline-block;
position: relative;
list-style: none;
text-align: right;
width: 800px;
padding: 0px;
margin: 0px;

}

.header li{
display: inline-block;
padding: 0px;
margin: 0px;
line-height: 100px;
}
.airline-logo{
width: 400px;
display:inline-block;
color: white;
line-height: 100px;
font-weight: 900;
font-size: 38px;
padding: 0px;
margin: 0px;

}

[Beverleyh]

Try making a live demo in CodePen so that we can see the issue firsthand.

[LearnTheNew]

You have repeaded the .header class with different widths.

[Author]

Posts