JSFiddle - React, Tailwind, and code Playground

HTML

<div id="navcontainer">
    <div id="siteLogo"> <a href="index.html"><img src="images/some image in a folder"/></a>        

    <div id="menu">
        <ul>
          <li><a href="index.html">Home</a></li>
            <li><a href="calendar.html">Calendar</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    </div>
 </div>

CSS

#menu li a:hover { 
    color: #ff9900;
    border-bottom: 4px solid #ff9900;
}

#siteLogo img{
    height:auto;
    width: 220px;
}

#menu {
font-family: 'Comfortaa', Arial, Helvetica, sans-serif;
font-size: 16px;
color: #c0c0c0;
    }

#outer {
    width: 960px;
    margin:0 auto;
}

#wraper {
    width: 900px;
    margin:0 auto;
}

#navcontainer {
    width: 900px;
    margin: 0 auto;
    border-bottom: solid 1px #000;
    overflow: hidden;
}

#siteLogo {
    float: left;
    margin-top: auto;
}

#menu {
    float: right;
    margin-top: auto;
}

#menu ul li {
    display:inline;
}

#menu ul {
    margin-top: 50px;
    text-align: center;
}

#menu ul li a {
    padding:0 0 0 20px;
}