How to css style header

Community Off Topic
1

I have this code in html:


<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <div class="sub-nav">
                <ul class="sub-nav-left">
                    <li class="logo-bg"><a href="index.html"><img src="img/logo-white.png" alt="Logo"/></a></li>
                    <li><a href="index.html"><h1>Header</h1></a></li>   
                </ul>
                <ul class="sub-nav-right">
                    <li><a href="#">Media</a></li>
                    <li><a href="#">Marketing</a></li>
                    <li><a href="#">Contact</a></li>
                    <li>
                        <form action="#" method="POST" id="search-form">
                            <input type="text" id="search-text-input" placeholder="Search..."/><!--
                            --><button id="search-submit"><img src="img/search.png" alt=""/></button>
                        </form>
                    </li>
                </ul>
            </div>
        </div>

And I don’t know how to css style it to get this:

1600×50 3.97 KB

Can You please help me

2

Do you already have any css code?

3

*{
box-sizing: border-box;
}
body{
width: 1600px;
margin: 0;
padding: 0;
font-size: 16px;
font-family: “Bitter”;
background-color: #eee;
}
.container{
width: 940px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.header{
width: 1600px;
height: 50px;
background-color: #252525;
float: left;
}
.sub-nav{
width: 940px;
display: inline-block;
}
.logo-bg{
width: 60px;
height: 50px;
background-color: #303030;
display: inline-block;
}
.logo-bg img{

}
.sub-nav-left{

float: left;

}
.sub-nav-left li,
.sub-nav-right li{
display: inline-block;
}
.sub-nav-right{
float: right;
}

4

I am going to take a look, give me a second

5

It looks really messy, how good is the understanding of the code you are using? Your lists have use margin/padding, it is just a mess, i personally dislike display: inline-block, anyway, here is a solution that works at least a whole lot better

6

Thank You for Your answer!