JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
<ul class="nav_bar"><li><a href="#">Home</a></li><li>|</li><li><a href="#">Catering</a></li><li>|</li><li><a href="#">Banquets &amp; Parties</a></li><li>|</li><li><a href="#">Menu</a></li><li>|</li><li><a href="#">About Us</a></li><li>|</li><li><a href="#">Location &amp; Hours</a></li><li>|</li><li><a href="#">Contact</a></li></ul>      </div>

CSS

body {
    font-size: 14px;
}
#header {
    background: url("header_bg.png") no-repeat scroll 0 0 red;
    height: 127px;
    width: 665px;
}
.nav_bar {
    list-style-type: none;
    margin: 0;
    white-space: nowrap;
}
.nav_bar li {
    display: inline;
    padding: 2px;
}
#header .nav_bar {
    padding-left: 179px;
}

JavaScript

jQuery(document).ready(function() {});
var content_size;
function resize_text() {
    var container_right_coord = jQuery('div#header').offset().left + jQuery('div#header').outerWidth();
    var content_right_coord = jQuery('.nav_bar li:last-child').offset().left + jQuery('.nav_bar li:last-child').outerWidth();
    while (container_right_coord < content_right_coord - 2.0) {
        var content_size = jQuery('.nav_bar').find('li a').css('font-size').replace('px', '');
        jQuery('body').css('font-size', (content_size - 1) + 'px');
        container_right_coord = jQuery('div#header').offset().left + jQuery('div#header').outerWidth();
        content_right_coord = jQuery('.nav_bar li:last-child').offset().left + jQuery('.nav_bar li:last-child').outerWidth();
    }
    alert(content_size);
}

resize_text();
jQuery('body').css('font-size', (content_size - 1) + 'px');
resize_text();