How do I keep my DIV in the middle?

Hello,

I have the following CSS code (from ChatGPT):

 .navbar { background-color: #3498db; /* Add your desired background color */ padding: 10px; display: flex; justify-content: space-between; align-items: center; width: 100%; /* Make sure the navbar stretches across the whole width */ } .center-container { text-align: center; margin: 0 auto; /* Center .center-container horizontally */ } .header { display: flex; align-items: center; margin: 0 auto; /* Center the .header horizontally */ } .header h1 { margin-right: 10px; color: white; font-size: 4vw; } .header img { width: 6vw; height: auto; } .settings-icon { width: 50px; /* Adjust the width as needed */ margin-right: 10px; /* Adjust the margin as needed */ cursor: pointer; /* Optional: Add a cursor pointer for better UX */ }

If my Settings icon is 0 px wide, the ".center-container" is in the center, but the wider the icon, the further the center container moves to the left. However, the center container should ALWAYS be exactly in the center of the screen. The Settings icon, on the other hand, should be in the right corner (with a certain distance from the edge).

HTML snippet:

 <link rel="stylesheet" href="{{ url_for('static', filename='css/navbar.css') }}"> <div class="navbar"> <div class="center-container"> <div class="header"> <img...> <h1>PRTKL: {{ sub_page_title }}</h1> </div> </div> <svg class="settings-icon"> </svg> </div>

The navbar is integrated into several pages via Flask or Jinja.

How do I solve the problem?
Thanks for your help!