Hello everyone im trying to create an html page with a header, main, footer layout. Every element is inside a flexbox column container. The problem is that when im viewing the page with mobile toolbar on chrome set to an iphone 14 pro max the page looks like the photo bellow:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');* { box-sizing: border-box;}html { font-size: 12pt; font-family: "Noto Sans", sans-serif;}body { margin: 0; padding: 0; background-color: #8a1313;}img { height: 140px; width: 140px;}.flex-container { display: flex; flex-direction: column; min-height: 100vh;}.header { position: sticky; top: 0; width: 100%; background-color: white; padding: 10px 30px; z-index: 1000;}.navbar { display: flex; justify-content: center; align-items: center;}.navbar-links ul { margin: 0; padding: 0; display: flex;}.navbar-links li { list-style: none;}.navbar-links li a { text-decoration: none; padding: 0 30px; display: block; color: black; font-size: 20px; cursor: pointer; transition: 0.3s;}.navbar-links li a:hover { color: #8a1313; text-decoration: underline; text-underline-offset: 7px;}.main { flex-grow: 1;}<meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer"/><div class="flex-container"><header class="header"><nav class="navbar"><div class="header-logo"><img src="Symposium Radio LOGO White.png" alt="Logo"></div><div class="navbar-links"><ul><li><a href="#">Αρχική</a></li><li><a href="#">Σχετικά</a></li><li><a href="#">Ηομάδαμας</a></li><!-- <li><a href="#">Πρόγραμμα</a></li><li><a href="#">Επικοινωνία</a></li> --></ul></div></nav></header><main class="main">Main</main><footer class="footer">Footer</footer></div>How can i fix this issue?