jQueryのFLEXNAVを横一杯（width:100%状態）に表示させたいです。

FLEXNAVを横幅一杯に表示して背景色をつけたいのですが、どうすればいいでしょうか？
ちなみにこちらが出力されているソースです。

html
1<div class="menu-button">Menu</div>
2<nav class="menu-menu-1-container">
3  <ul class="flexnav" id="menu-menu-1" data-breakpoint="767">
4    <li id="menu-item-67" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-67"><a href="http://127.0.0.1:4001/wordpress/">ホーム</a></li>
5    <li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-74"><a href="http://127.0.0.1:4001/wordpress/news/our-company/">Our Company</a>
6      <ul class="sub-menu">
7        <li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"><a href="http://127.0.0.1:4001/wordpress/news/our-staff/">Our Staff</a></li>
8        <li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"><a href="http://127.0.0.1:4001/wordpress/news/our-staff/employment-opportunities/">Employment Opportunities</a></li>
9      </ul>
10    </li>
11    <li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-79"><a href="http://127.0.0.1:4001/wordpress/news/company-history/">History</a></li>
12    <li id="menu-item-77" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-77"><a href="http://127.0.0.1:4001/wordpress/sample-page/">Sample Page</a></li>
13    <li id="menu-item-80" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-80"><a href="http://127.0.0.1:4001/wordpress/links/">Links</a></li>
14    <li id="menu-item-78" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-78"><a href="http://127.0.0.1:4001/wordpress/support/">Support</a></li>
15  </ul>
16</nav>