I have three “containers” and components, and an extra div to nav. How can I align the three div containers and the nav div to the same starting point within the first div? How can I achieve this in CSS?

return (
  <div className="header-container">
    <div className="header-top">
      <div className="logo">
        <Logo />
      </div>
      <div className="container-search">
        <div className="search">
          <span className="p-input-icon-left">
            <i className="pi pi-search"></i>
            <input
              type="text"
              placeholder="Looking for something special?"
              className="p-inputtext-sm"
              onKeyPress={handleSearch}
            />
            <box-icon name="search"></box-icon>
          </span>
        </div>
      </div>
      <div className="register">
        <h1>Not too late to Register</h1>
      </div>
      <div className="button-enter">
        <button>Go!</button>
      </div>
      <div className="car-buy">
        <box-icon name="cart"></box-icon>
      </div>
    </div>
    <div className="navigation">
      <ul>
        <li><a href="#Open">Open</a></li>
        <li><a href="#itens">Our Products</a></li>
        <li><a href="#sections">Sections</a></li>
        <li><a href="#buy">Cart</a></li>
      </ul>
    </div>
  </div>
);

I am not sure if I can center those three