JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="mainNav"><!-- begin mainNav ul -->
            <li class="mainNavFirst"><a href="#" title="">About Us<span class="mainNav_arrow"></span></a></li>
            <li><a href="#" title="">Families<span class="mainNav_arrow"></span></a></li>
            <li><a href="#" title="">Volunteers<span class="mainNav_arrow"></span></a></li>
            <li><a href="#" title="">Schools<span class="mainNav_arrow"></span></a></li>
            <li><a href="#" title="">Supporters<span class="mainNav_arrow"></span></a></li>
            <li><a href="#" title="">PENGUINS Friendmeet Test<span class="mainNav_arrow"></span></a></li>

            </ul><!-- end mainNav ul -->

CSS

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/***** mainNav styling ******/
ul#mainNav {
    padding: 0;
    margin: 0;
    position: relative;
    width: 980px;
    /* height: 40px; */
    background: transparent url(images/mainNavbar.png) no-repeat top center;
    margin: 0 auto;
}
ul#mainNav li {
    float: left;
    list-style: none;
    margin: 0 18px;
    display: inline;
    height: 40px;
    line-height: 40px;
}
ul#mainNav li.mainNavFirst {
margin-left: 27px;
}
ul#mainNav li a,ul#mainNav li a:link,ul#mainNav li a:visited {
color: #111110;
font-family: "Helvetica Neue",Arial, Sans-Serif,default;
font-size: 17px;
text-align: left;
letter-spacing: 1px;
}