Struggling with making my flexbox navbar responsive and in need of some help. I want the padding between links to decrease as the page width shrinks, but can't figure out how to prevent the "Contact Us" link from being hidden by the browser window when it gets small (see photo below).
I'm wondering if there's a way to achieve this without using media queries or if I'm just overcomplicating things for myself. Any experts out there who can lend a hand? I've already wasted too many hours on this!
Screenshot of phone-sized screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/style.css" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li><a href="./index.html">Home</a></li>
<li><a href="./merchandise.html">Merchandise</a></li>
<li><a href="./about.html">About</a></li>
<li><a href="./contactUs.html">Contact Us</a></li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}