Navigation elements position - html

Question

I am trying to do a navigation bar with some <ul>and<li> but at this time I can position the elements in the order I want, I am learing how to postion elements and I am new at this css :/ I hope you guys can help me out.
#navbar {
width:100%;
height: 75px;
top : 20px;
position: absolute;
z-index: 999;
background-color: #fff;
opacity: 0.8;
}
.logo img {
height: 75px;
}
.navigation{
width: 100%;
height: 75px;
top :10px;
position: absolute;
z-index: 999;
}
ul {
list-style-type: none;
text-decoration: none;
}
li {
display: inline-block;
margin-left :200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</div>
</div>
I have this so far but I want something like this
What I want to look like
The problem is when I try to style the li a { it doesnt let me to make only margin from the elements besides he give margin from everthing :/

Answer 1

body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 50%;
margin: 0 auto;
}
header {
background: #fff;
opacity: 0.8;
position: fixed !important;
top : 20px;
width: 100%;
z-index: 999;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
margin-left: 10%;
padding: 10px 0;
}
.logo img{
height: 60px;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 60px;
padding-top: 30px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="logo">
<img src="img/logo.png">
</div>
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</nav>
</div>
</header>

Answer 2

Here's a solution for you. I changed only the last two CSS rules, everything else is like in your code.
#navbar {
width: 100%;
height: 75px;
top: 20px;
position: absolute;
z-index: 999;
background-color: #fff;
opacity: 0.8;
}
.logo img {
height: 75px;
}
.navigation {
width: 100%;
height: 75px;
top: 10px;
position: absolute;
z-index: 999;
}
ul {
list-style-type: none;
text-decoration: none;
}
li {
display: inline-block;
margin-left: 50px;
}
li:first-child {
margin-left: 100px;
}
ul li a {
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div id="navbar">
<div class="logo">
<img src="img/logo.png">
</div>
<div class="navigation">
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Services</li>
<li>About Us</li>
<li>Contacts</li>
<li>Partners</li>
</ul>
</div>
</div>