After experimenting with different CSS properties like margin-right: auto and margin-left:auto, I found that using display: inline-block works well for centering actual links, but it causes issues with the menu when added as a parent element.
I suspect that there may be a conflict in my styling that is preventing the centering of the content within the browser viewport. I hope someone can provide suggestions to help resolve this issue...
Best Regards, Dale
Below is my simplified CSS code:
.navigation {
width: 96%;
margin: 1% auto;
padding: 1%;
border-top: 1px solid rgb(119,120,122);
border-bottom: 1px solid rgb(119,120,122);
background-color: transparent;
}
ul {
overflow: hidden;
margin: 0 auto;
}
ul li {
display: inline;
}
ul li ul {
display: none;
}
ul li:hover ul {
width: 96%;
display: block;
position: absolute;
margin: 0 auto;
}
ul li a {
display: inline-block;
cursor: pointer;
position: relative;
padding: 1.25% 1.4%;
margin: 0.15% -0.2%;
}
ul li:hover ul a {
margin: -0.2% 0;
}
P.S. I removed comments and unnecessary code for clarity, even though I prefer writing detailed CSS!