I am trying to center align the menu - css

Question

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.
To remove the Site-Name on the left side. I used display: none.
<div id="header-left">
<div id="hgroup" class="logo-disable">
<h1 id="site-title">
Catch Kathmandu
</h1>
<h2 id="site-description"> Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any devices.</h2>
</div><!-- #hgroup -->
</div>
#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;
}
To center-align the menu on the right side.
<div id="header-right" class="header-sidebar widget-area">
<aside class="widget widget_nav_menu">
<div id="primary-menu-wrapper" class="menu-wrapper">
<div class="menu-toggle-wrapper">
<button id="menu-toggle" class="menu-toggle" aria-controls="main-menu" aria-expanded="false"><span class="menu-label">Menu</span></button>
</div><!-- .menu-toggle-wrapper -->
<div class="menu-inside-wrapper">
<nav id="site-navigation" class="main-navigation" role="navigation" aria-label="Primary Menu" aria-expanded="false">
<ul id="menu-primary-items" class="menu nav-menu"><li class="current-menu-item">Home</li><li class="page_item page-item-2">About</li><li class="page_item page-item-182">Home</li><li class="page_item page-item-46 page_item_has_children" aria-haspopup="true">Parent Page<button class="dropdown-toggle" aria-expanded="false"><span class="screen-reader-text">expand child menu</span></button><ul class="children"><li class="page_item page-item-49">Sub-page</li></ul></li></ul> </nav><!-- .main-navigation -->
</div>
#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%;
}
I reached my center alignment by reducing the margin-right from 50% then to 33%. Though the sweet spot is between 32% to 33%.
I also tried center-align the menu with pixels(margin-right :400px).
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.
Is there any other way I could center the menu?

Answer 1

There are many ways to center items depending on their block type.
You can use display flex on the parent and then add a justify-content: center to center the children items on the page horizontally, see flex axis - in basic concepts of flex for more info.
Then you can use flex property on the children and can add a number to that property to tell CSS how much of the parents width that child will take up.
For example if I set both to child elements to flex: 1 they will take up 50%, if there were three child elements all with a flex: 1, they would then take up 33% of their parents width. I can also place a percentage on the flex property as well => .header set flex: 60% and .nav-parent set flex: 40%, they will then take up their set percentages of the parents width.
Furthermore I can add display: flex properties to the child elements as well to further center their contents, as I have done on the .menu class which is a child of the .nav-parent. These can then be further align and centered using the axis centering properties for flex, justify-content and align-items. The good thing is that these properties are dynamic in that they scale to fit browser sizes as well.
.nav-section {
display: flex;
justify-content: center;
font-family: sans-serif;
align-items: center;
padding: 1rem;
}
.header h1 {
line-height: 1px;
}
.header {
flex: 60%;
}
.nav-parent {
flex: 40%;
}
.header span {
font-size: .8rem;
font-weight: 100;
font-style: italic;
}
ul li {
list-style: none;
}
ul li ~ li {
margin-left: .5rem;
}
.btn {
flex: 1;
padding: .5rem 0;
text-align: center;
}
.menu {
display: flex;
justify-content: center;
color: #555;
font-size: .8rem;
}
.active {
background: skyblue;
}
<div class="nav-section">
<div class="header">
<h1>Catch Kathmandu</h1>
<span>Catch Kathmandu Theme is a fully responsive WordPress theme that looks elegant on any device.</span>
</div>
<div class="nav-parent">
<ul class="menu">
<li class="home active btn">Home</li>
<li class="about btn">About</li>
<li class="contact btn">Contact</li>
<li class="parent btn">Page</li>
</ul>
</div>
</div>

Answer 2

Is there any other way I could center the menu?
There are a good handful of ways you can center the menu.
If your menu is a block-level element with an explicitly declared width, one of the most basic techniques is applying the keyword auto to margin-right and margin-left:
.my-menu {
margin-top: 12px; // <= Just an example, you can use any value
margin-right: auto;
margin-bottom: 12px; // <= Just an example, you can use any value
margin-left: auto;
}
the CSS shorthand for these four declarations is:
.my-menu {
margin: 12px auto 12px auto;
}
or, since the vertical and horizontal values are the same, you can declare:
.my-menu {
margin: 12px auto;
}
Working Example:
.my-menu {
display: block;
margin: 12px auto;
}
.my-menu.vertical {
width: 100px;
}
.my-menu.horizontal {
width: 396px;
padding: 0;
}
.my-menu.horizontal li {
display: inline-block;
padding: 0 6px;
}
.my-menu.horizontal li::before {
content: '•';
display: inline-block;
padding-right: 6px;
font-size: 20px;
}
<ul class="my-menu vertical">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>
<ul class="my-menu horizontal">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4</li>
</ul>