Trouble centering a CSS list menu within a div - html

Question

I'm hitting a wall with my relatively basic knowledge of CSS. I've put together a menu with the intention of centering it within its div. For whatever reason, all attempts at centering it with CSS (margin 0 & set width for the menu's ID) have failed, so I've resigned to changing the width of the div to just barely fit all of the menu options and centered that on the page.
However, this has caused it to be displayed incorrectly in a couple browsers (mainly Safari).
Heres the CSS:
#primary_nav_wrap {
display: block;
}
#primary_nav_wrap ul {
list-style: none;
text-align: center;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
margin: 0 auto;
color: #8a7e70;
text-decoration: none;
font-size: 13.9pt;
padding: 0 10px;
letter-spacing: 2px;
font-family: Engravers;
}
#primary_nav_wrap ul li {
display: inline;
position: relative;
float: left;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
width: 204px;
position: absolute;
top: 100%;
left: 50%;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(0, 0, 0, 0.92);
margin-left: -100px
}
#primary_nav_wrap ul ul li {
float: none;
width: 204px
}
#primary_nav_wrap ul ul a {
font-family: Eavesregular;
font-size: 12pt;
letter-spacing: .5px !important;
line-height: 120%;
padding: 5px 5px
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
a:hover,
a:active,
li:hover,
li:active,
ul:hover,
ul:active {
color: #bfb3a0 !important;
}
and my HTML
<div id="primary_nav_wrap">
<ul>
<li><span style="color:#fffdf2;">philosophy</span></li>
<li>collection
<ul>
<li>Shades of Black</li>
<li>L' Amour du Sauvage</li>
<li>Dark Phoenix</li>
<li>Buy the Collections</li>
</ul>
</li>
<li>fashionshow
<ul>
<li>Phoenix New York<br />Grand Central Station</li>
</ul>
</li>
<li>press
</li>
<li>blog</li>
<li><a class="lastcontact" href="/wild/contact">contact</a></li>
</ul>
</div>
and here's the website:
https://christianpersi.co/wild/
Thank you for any and all help!

Answer 1

Have a look at using flex to position your elements.
By default flex will render your items in a row, you can set justify-content: center; to align everything centre with a margin for spacing. You can have center on the parent of the menu, and inside the ul for the menu justify-content: space-between; to space them evenly, but as #Bhargav pointed out, your issue is probably down the number of characters you have in your menu breaking the layout with a limited width to sit in.