Making a navbar of logo + nav + social - html

Question

I'm trying to center the text in my navbar and my social links too, but I just can't. I've searched on google, tried everything, it doesn't work. I'm a beginner btw. I've tried every solution I've found on google for about 1hr and all I did is getting mad. damn
I don't get it. In the snippet everything works fine, it is centered as I want. But in my PC, it looks like this: pic
Can you explain to me why does it happen?
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
width: 100%;
margin: 0;
}
#bara-wrap {
position: absolute;
top: 0;
width: 100%;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 45em;
float: left;
}
.social {
color: white;
float: right;
display: inline-block;
font-weight: bold;
}
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
</nav>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</div>
</header>

Answer 1

Remove the butoane class and copy the posted right now css file and paste it into your css file....
//Header
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
img{
margin-top: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
ul li {
margin-top: 25px;
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}

Answer 2

use this one i made some changes in your html and css.
html
<header id="header" style="opacity: 1; top: 0px;">
<div id="bara-wrap">
<img src="img/logo.png" alt="LOGO" class="logo" />
<nav id="bara">
<ul class="butoane">
<li>home</li>
<li>about</li>
<li>skills</li>
<li>contact</li>
</ul>
<ul class="social">
<li class="facebook">facebook</li>
</ul>
</nav>
</div>
</header>
css
#header {
position: absolute;
top: 0;
}
//bara navigatie
#bara {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#bara-wrap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70px;
background: #111111;
}
.butoane ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
.butoane li {
float: left;
font-weight: bold;
margin-right: 4em;
font-size: 1em;
}
.butoane li a {
display: block;
color: white;
text-decoration: none;
}
.logo {
width: 11em;
margin-left: 100px;
float: left;
}
.social {
position: absolute;
right: 20%;
top: 0;
color: white;
float: right;
display: inline-block;
font-weight: bold;
}