Как центрировать элементы в файле .jsx?

Я только начинаю веб-разработку. В настоящее время я изучаю Node.js и React с Vite. Я не мог правильно центрировать меню заголовка, и все, что я нашел в Интернете, не работало. Вероятно, это что-то очень элементарное, но, как я уже сказал, я новичок. Спасибо за вашу помощь!

function Header() {
    const ulStyle = {
        display: "flex",
        flexDirection: "row",
        backgroundColor: "#2b2b2b",
        alignItems: "center"
    }
    const liStyle = {
        flexGrow: "1",
        flexBasis: "0",
        position: "relative"
    }
    return (
        <header>
            <h1>Website</h1>
            <nav>
                <ul style = {ulStyle}>
                    <li><a href = "#" style = {liStyle}>Home</a></li>
                    <li><a href = "#" style = {liStyle}>About</a></li>
                    <li><a href = "#" style = {liStyle}>Services</a></li>
                    <li><a href = "#" style = {liStyle}>Contact</a></li>
                </ul>
            </nav>
        </header>
    );
}

Или в простом HTML

.ulStyle {
  display: flex;
  flex-direction: row;
  background-color: #2b2b2b;
  align-items: center;
}

.liStyle {
  flex-grow: 1;
  flex-basis: 0;
  position: relative;
}

<header>
  <h1>Website</h1>
  <nav>
    <ul class = "ulStyle">
      <li><a href = "#" class = "liStyle">Home</a></li>
      <li><a href = "#" class = "liStyle">About</a></li>
      <li><a href = "#" class = "liStyle">Services</a></li>
      <li><a href = "#" class = "liStyle">Contact</a></li>
    </ul>
  </nav>
</header>