How to center a logotype and a menu with singularitygs

Question

I want to center two elements in a header with singularity. This is the html code I have

<div class="l-branding">


<div class="l-region l-region--branding">
        <div class="block block--block block--block-5" id="block-block-5">
            <div class="block__content">
         <p><a target="_self" href="http://somoscoatepec.com"><img width="280" height="139" title="" alt="logotipo" src="http://somoscoatepec.com/sites/default/files/logocoate.png"></a></p>
       </div>
</div>
<nav class="block block--system block--menu block--system-main-menu" role="navigation" id="block-system-main-menu">

  <ul class="menu">
      <li class="first leaf"><a title="menu" href="/section">menu element</a></li>
<li class="leaf"><a title="" href="/que-hacer">menu element</a></li>
<li class="leaf"><a title="" href="/que-ver">menu element</a></li>
<li class="leaf"><a title="" href="/que-comprar">menu element</a></li>
<li class="leaf"><a title="" href="/hoteles-y-restaurantes">menu element</a></li>
<li class="leaf"><a title="" href="/blog">menu element</a></li>
<li class="last leaf"><a title="" href="/contact">menu element</a></li>

</ul>

    </nav>

  </div>

    </div>

And the sass code I have is:

// layout



 $grids: 12;
 $gutters: 5px;

// branding and logotype in  #block-block-5 

 .l-branding  {


                           @include grid-span(12,1);
                          padding: 0 0 0 5px;
                           clear:both;
                           background-color: #492527 ;

                                   #block-block-5    {
                                   @include grid-span(8, 6);
                                    //background-color: #492527;
                                    padding-top:10px;
                                    clear:right;

                                   } 

                           }

// main menu
#block-system-main-menu {

    @include grid-span(8, 5);
    background-color: #492527;
    height:100%;
    z-index:10;

}

So I try to find if there is a better solution to center elements.

the logotype is in the id #block-block-5 and the menu with the id #block-system-main-menu

the menu is the big problem, because dont adjust no matter is begin in the four or five column in any case there is a little extra space and never get in the center. Any idea to fix this problem?