title: Navigation Alignment Problems
body: <p>Is it possible with css or maybe javascript/jQuery-manipulation to center some navigation items within the same div container, while other itmes in this container (last three) should be on the right edge of the navbar? I've tried it with flexbox and with inline-block/text-align center. I was able to center the whole div container. But when I moved the last three divs to the right, the remaining items stayed in their position. Based on the fact, that the three items now are on the right side, the width of the centered navbar changed and it should actually move a little bit to the right to be centered again.</p>
  
  <p>Making new wrap elements around these centered and right side elements would be the last choice, since I am running on wordpress with php-menues. Therefore, changing the markup would maybe not so easy, like a simple css or javascript/jquery solution.
  You may have a look at the fiddle below the posted markup to understand me better ;)</p>
  
  <p>Default HTML-Markup:</p>
  
  <pre><code>&lt;div class="header" style="height: 100px; overflow: visible;"&gt;
  &lt;div class="row"&gt;
  &lt;div class="logo" data-margin-top="34px" data-margin-       bottom="10px" data-margin-left="0px" data-margin-right="0px"&gt;
              &lt;a class="logo-link" href="http://stackoverflow.com/"&gt;
                      &lt;img src="http://www.backstein.com/media/mobil_1376659435_test_logo_neu.jpg" alt="ava" class="logo-1x standard-logo" style="" height="33" width="45"&gt;
                  &lt;/a&gt;
  &lt;/div&gt;
      &lt;div class="main-menu"&gt;
          &lt;ul id="menu-mainnav" class="menu"&gt;
              &lt;li id="menu-item-116" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-116 dropdown-menu"&gt;
                  &lt;a href="/link1/" aria-haspopup="true"&gt;
                      &lt;span class="menu-text"&gt;CENTER &lt;/span&gt;
                  &lt;/a&gt;
                  &lt;/li&gt;
              &lt;li id="menu-item-263" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-263 dropdown-menu"&gt;
                  &lt;a href="http://stackoverflow.com/" aria-haspopup="true"&gt;
                      &lt;span class="menu-text"&gt;CENTER &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt;
                      &lt;span class="menu-text"&gt;CENTER &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt;
                      &lt;span class="menu-text"&gt;CENTER &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt;
                      &lt;span class="menu-text"&gt;CENTER &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt;
                      &lt;span class="menu-text"&gt;TO RIGHT &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt;
                      &lt;span class="menu-text"&gt;TO RIGHT &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
              &lt;li id="menu-item-133" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-133 menu-item-button"&gt;
                  &lt;a href="http://stackoverflow.com/"&gt; &lt;span class="menu-textmenu-text button button-default button-medium"&gt;TO RIGHT
                      &lt;/span&gt;
                  &lt;/a&gt;
              &lt;/li&gt;
         &lt;/ul&gt;&lt;/div&gt;      
  
          &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Default CSS:</p>
  
  <pre><code>.header {
    height: 100px;
    overflow: visible;
    padding: 0px;
  }
  
  .row {
    position: relative;
    width: 94.44444%;
    margin: 0 auto;
    max-width: 100%;
  }
  
  .logo {
    display: inline-block;
    width: auto;
    float: left;
   }
  
  .main-menu {
    float: right;
    position: relative;
    z-index: 200;
    overflow: hidden;
  }
  
   #menu-mainnav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  
  #menu-mainnav &gt; li {
   float: left;
   margin: 0;
   padding: 0;
   position: relative;
   cursor: pointer;
   display: list-item;
   text-align: match-parent;
   padding-right:11px;
    }
  
  #menu-mainnav &gt; li &gt; a {
   font-size: 11px;
   display: block;
   box-sizing: content-box;
   }
  </code></pre>
  
  <p>JSFiddle-Example: <a href="https://jsfiddle.net/tz0atc4o/1/" rel="nofollow">https://jsfiddle.net/tz0atc4o/1/</a></p>
  
  <p>Update:
  Here a fiddle, where I've tried the text-align and inline solution. You may read the CSS-Comments, so you are able to test the thing, when the whole div is centered. In this case just comment out the last css rule. In contrast the the whole centered div, I am not sure if the items are really centered, when the last three are floated to right :/</p>
  
  <p><a href="https://jsfiddle.net/37gc2v9x/" rel="nofollow">https://jsfiddle.net/37gc2v9x/</a> </p>
  
  <p>Thanks in advance!</p>