Aligning the navigation bar with logo

I'm trying to align my navigation menu but can't get it to work. What I want is - on the left side I want a small logo which also is a link that links to the start-page. And in the middle of the webbsite I want the other "text-links" to be. Like this

Here is the code and how it looks at the moment. https://jsfiddle.net/oliha089/wh1zwg4x/ The logo is not at the left and the text is not in the middle of the website.

HTML

    <header>
        <div class = "menu" >
            <ul>
                <li> <a  id = "logobut" href = "start-page.html">
                    <!-- försök flytta loggan till vänster kanten -->
                    <img id = "logoalign" src = "logga8svart.jpg" /> </a> </li>

                <li> <a id = "portf" href = "portfolio-page.html"> PORTFOLIO </a> </li> 
                <li> <a  id = "about" href = "aboutme-page.html"> ABOUT </a> </li> 
                <li> <a id = "contact" href = "contactme-page.html"> CONTACT </a> </li> 
            </ul>
        </div>
    </header>

CSS

/* menu CSS-code */

.menu ul{
list-style: none;
z-index: 999;
background-color: white;/*#444;*/
text-align: center;
padding: 0;
margin: 0;
position: fixed;
width: 100%;
opacity: 0.7;
height: 50px;   
}

.menu a:hover {
text-decoration: underline;
opacity: 1;
}

.menu a.active {
background-color: #fff;
color: #444;
cursor: default;
}

.menu a {
opacity: 0.7;
text-decoration: none;
font-weight: bold;
color: black; /*#fff;*/
display: block;
transition: background-color;
margin-left: 20px;
margin-right: 20px;
}

#logobut {
margin-right: 100px;
}
.menu li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
display: inline-block; 
}   
@media screen and (min-width: 600px) {
.menu li {
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.2em;
}

#logoalign {
height: 40px; 
vertical-align: middle;
}

Thanks.