Pure CSS, equal-width navigation tabs.

HTML

<ul class="tabs">
    <li class="tab">
        <a href="#">Home</a>
    </li>
    <li class="tab">
        <a href="#">About</a>
    </li>
    <li class="tab">
        <a href="#">Work</a>
    </li>
    <li class="tab">
        <a href="#">Contact</a>
    </li>
</ul>

CSS

.tabs, .tab {
    padding: 0;
    margin: 0;
    display: block;
}

.tabs {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
}

.tab {
    flex: 1; 
}

.tab a {
    background-color: #BADA55;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    padding: 1em;
    display: block;
}

.tab a:hover {
    background-color: #A3C43B;
}

html {
    font: 0.75em/1.5 sans-serif;
}

JavaScript

/**
 * Using only CSS, we can make a tabbed navigation whose tabs always
 * occupy an equal share of the available width. No JS to interrogate
 * the DOM, no server-side logic to count through items, no inline styles.
 *
 * Try commenting out, or adding, an `li` in the markup above. The tabs
 * should always fit the available horizontal room in equal amounts.
 */