How to remove gap between menu

[admin]

I made this page in wordpress and foundation.I want to change the below menu :
<img src="

https://imgur.com/oPUtq

" alt="">

into this:
<img src="

https://imgur.com/9iyR7

" alt="enter image description here">

My css to override foundation's app.css is as below:

.top-bar-section li
{
    width:150px;
    word-wrap:break-word;
    border-bottom: solid 1px #BC9633;
    float:left;
}

PART OF app.css

.top-bar-section li:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;background:#ffffff;}.top-bar-section li:not(.has-form) a:not(.button):hover {border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button) {padding:0 15px;line-height:45px;color:#000000;border-bottom: 1px solid #BC9633;padding-bottom: 1px;padding-bottom: 3px;border-bottom-width: 1px;border-bottom-style: solid;}.top-bar-section li.active:not(.has-form) a:not(.button):hover {background:#BC96633;color:#000000;}

HTML

<div class="menu-wrapper">
    <div class="top-bar-container contain-to-grid show-for-medium-up">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <!--<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>-->
               <a href="<?php echo home_url(); ?>"><img src="img/fspb_logo.png" width="165" height="145" ></a>
            </li>

        </ul>
        <section class="top-bar-section" style="padding-top:55px;">

//below two lines display the menu

        <?php foundationPress_top_bar_l(); ?>
        <?php foundationPress_top_bar_r(); ?>


        </section>

    </nav>



</div>
</div>

***** I removed padding:0 15px;line-height:45px; from .top-bar-section li..and it turned out to be below:
<img src="

https://imgur.com/FMU8b

" alt="enter image description here">

How do I push the long menu up pls?