title: I am trying to center align the menu
body: <p>I am a newbie in CSS. I am learning by playing with the code of a WordPress theme.
  Last time I posted this issue but I contracted covid and was hospitalized for more than two weeks. I have deleted the old question and broken the initial question into two parts. This is the first part.
  <a href="https://i.stack.imgur.com/c8VC8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c8VC8.png" alt="enter image description here" /></a></p>
  <p>To remove the Site-Name on the left side.  I used display: none.</p>
  <pre><code>&lt;div id=&quot;header-left&quot;&gt;
      
      &lt;div id=&quot;hgroup&quot; class=&quot;logo-disable&quot;&gt;
          &lt;h1 id=&quot;site-title&quot;&gt;
              &lt;a href=&quot;https://wp-themes.com/catch-kathmandu/&quot; title=&quot;Catch Kathmandu&quot; rel=&quot;home&quot;&gt;Catch Kathmandu&lt;/a&gt;
          &lt;/h1&gt;
          &lt;h2 id=&quot;site-description&quot;&gt; Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any devices.&lt;/h2&gt;
      &lt;/div&gt;&lt;!-- #hgroup --&gt;
  &lt;/div&gt;
  
  
  #header-left {
  -webkit-text-size-adjust: 100%;
  color: #404040;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  float: left;
  max-width: 100%;
  display: none;
  } 
  </code></pre>
  <p>To center-align the menu on the right side.</p>
  <pre><code>&lt;div id=&quot;header-right&quot; class=&quot;header-sidebar widget-area&quot;&gt;
                      &lt;aside class=&quot;widget widget_nav_menu&quot;&gt;
                          &lt;div id=&quot;primary-menu-wrapper&quot; class=&quot;menu-wrapper&quot;&gt;
          &lt;div class=&quot;menu-toggle-wrapper&quot;&gt;
              &lt;button id=&quot;menu-toggle&quot; class=&quot;menu-toggle&quot; aria-controls=&quot;main-menu&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;menu-label&quot;&gt;Menu&lt;/span&gt;&lt;/button&gt;
          &lt;/div&gt;&lt;!-- .menu-toggle-wrapper --&gt;
  
          &lt;div class=&quot;menu-inside-wrapper&quot;&gt;
              &lt;nav id=&quot;site-navigation&quot; class=&quot;main-navigation&quot; role=&quot;navigation&quot; aria-label=&quot;Primary Menu&quot; aria-expanded=&quot;false&quot;&gt;
              &lt;ul id=&quot;menu-primary-items&quot; class=&quot;menu nav-menu&quot;&gt;&lt;li class=&quot;current-menu-item&quot;&gt;&lt;a href=&quot;https://wp-themes.com/catch-kathmandu/&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;page_item page-item-2&quot;&gt;&lt;a href=&quot;https://wp-themes.com/catch-kathmandu/?page_id=2&quot;&gt;About&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;page_item page-item-182&quot;&gt;&lt;a href=&quot;https://wp-themes.com/catch-kathmandu/?page_id=182&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li class=&quot;page_item page-item-46 page_item_has_children&quot; aria-haspopup=&quot;true&quot;&gt;&lt;a href=&quot;https://wp-themes.com/catch-kathmandu/?page_id=46&quot;&gt;Parent Page&lt;/a&gt;&lt;button class=&quot;dropdown-toggle&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;screen-reader-text&quot;&gt;expand child menu&lt;/span&gt;&lt;/button&gt;&lt;ul class=&quot;children&quot;&gt;&lt;li class=&quot;page_item page-item-49&quot;&gt;&lt;a href=&quot;https://wp-themes.com/catch-kathmandu/?page_id=49&quot;&gt;Sub-page&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;                &lt;/nav&gt;&lt;!-- .main-navigation --&gt;
          &lt;/div&gt;
  
  
  #header-right {
  -webkit-text-size-adjust: 100%;
  color: #404040;
  line-height: 1.8;
  text-rendering: optimizeLegibility;
  word-wrap: break-word;
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
  padding-top: 50px;
  float: right;
  margin-right: 33%;
  }
  </code></pre>
  <p>I reached my center alignment by reducing the margin-right from 50% then to 33%. Though the sweet spot is between 32% to 33%.</p>
  <p>I also tried center-align the menu with pixels(margin-right :400px).</p>
  <p>The difference between both methods is visible when I reduce the screen size. 33% mostly remains center-align but the px changes the position of the menu, as the screen changes.</p>
  <p>Is there any other way I could center the menu?</p>