Logo in navigation bar positioning - html

Question

I know there are a lot of questions about this, I've tried some of them and I didn't have that much luck.
I have this structure:
HTML:
<header>
<div class="logo">
<a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
</div>
<div class="header-content">
<nav>
About me
Education
Personal life
My work
Contact me
</nav>
</div>
</header>
CSS:
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
align-items: center;
text-align: center;
min-height: 100vh;
width: 100%;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
.header-content {
margin-top: 2em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;;
justify-content: center;
align-items: center;
text-align: center;
}
.logo{
padding-right: 0;
}
nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
font-weight: 400;
color: rgb(49, 41, 61);
font-size: .8em;
margin-top: 2em;
margin-left: 30em;
}
I'm trying to move the logo to the left without affecting my navigation items to the right, I was so much in trouble getting the nav items to the right and over the image that I don't get how to make both of them positioned correctly.
How can I make it work?
https://codepen.io/anon/pen/zLMzpO

Answer 1

This CSS for header should do what you want:
header {
display: flex;
align-items: baseline;
justify-content: space-between;
min-height: 100vh;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
https://codepen.io/anon/pen/YjRQRV
(no column direction, justify-content: space-between; and align-items: baseline; are the essential changes to your version)

Answer 2

Here is my solution:
.logo{
padding-right: 0;
opacity: 1;
}
.logo img{
opacity: 0;
}
.logo::after{
content: "";
width: 50px;
height: 54px;
opacity: 0.99;
position: absolute;
top: 10px;
left: 10px;
background: url("https://user94.files.wordpress.com/2009/12/ubuntu-logo.png") no-repeat;
background-size: 100% 100%;
}

Answer 3

in navigation bar you should use flex-direction: row.
here is a useful link flexbox basic navigation - menu items and logo
body{
margin:0;
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
min-height: 100vh;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
.header-content {
margin-top: 2em;
}
header a,
header a:visited {
color: rgb(252, 252, 252);
text-decoration: none;
padding-bottom: 0.1em;
}
header a:hover {
color: #FA26BF;
}
.logo{
padding-right: 0;
}
.logo img{
vertical-align: bottom;
}
nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
font-weight: 400;
color: rgb(49, 41, 61);
font-size: .8em;
margin-top: 2em;
margin-left: 30em;
}
nav a {
margin: 1em;
}
nav a,
nav a:visited {
padding-bottom: 0.1em;
letter-spacing: 0.1em;
text-decoration: none;
color: rgb(252, 252, 252);
}
nav a:hover,
nav a:active {
color: #FA26BF;
}
<header>
<div class="logo">
<a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
</div>
<div class="header-content">
<nav>
About me
Education
Personal life
My work
Contact me
</nav>
</div>
</header>