JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <h1><a href="http://www.domain.com">Name of Site</a></h1>
    <ul class="nav">
        <li><a href="http://www.domain.com/home.php">Home</a></li>
        <li><a href="http://www.domain.com/profile.php">Profile</a></li>
        <li><a href="http://www.domain.com/settings.php">Settings</a></li>
        <li><a href="http://www.domain.com/logout.php">Logout</a></li>
    </ul>
    <ul class="nav extra">
        <li><a href="http://www.domain.com/logout.php">Ask a Question</a></li>
    </ul>
</div>

CSS

#header h1{
    float: left;
    width: 100px;
    height: 50px;
}

#header h1 a{
    background-image: url(http://www.domain.com/domain.png);
    display: block;
    text-indent: -9999px;
    overflow: hidden;
    width: 100px;
    height: 50px;
}

#header a, .nav a{ text-decoration: none; }

.nav li{
    background: #eee;
    border:1px solid #E2E2E2;
    float:left;
    margin-right: 0.5em;
    padding: 0.2em 0.5em;
}

.extra{
    float: right;
    margin-right: 0;
    top: 0;
    right: 0;
}