/    Sign up×
Community /Pin to ProfileBookmark

Layout help

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;

}

to post a comment
CSSHTML

4 Comments(s)

Copy linkTweet thisAlerts:
@codervaiFeb 12.2019 — make a parent div and inner that make two child divs. one for the logo and one for the menu.

use float or position to solve this problem.

let me know, it worked or not
Copy linkTweet thisAlerts:
@SempervivumFeb 12.2019 — Please post the HTML of your header either and use code tags.
Copy linkTweet thisAlerts:
@LearnTheNewFeb 12.2019 — the problem arises due to you have given different width sizes by use .header many times check it. @LearnTheNew
Copy linkTweet thisAlerts:
@esperance20009Feb 12.2019 — Parquet floors are usually long lasting and require little or no maintenance.[2] Unstuck blocks are re-glued. Bitumen-glued blocks require use of either hot bitumen or a cold bitumen emulsion, as other glue types do not adhere to bitumen.

https://ageshop.ir/product-category/parquet/
×

Success!

Help @kiwis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...