Nav bar issues and positioning.HTML/CSS

Web Development Front-End
1

I’m having issues with my project I am working on, basically when its full screen it looks great as i want it to. then as i collapse the browser it quickly implodes. I am trying to get everything to collapse evenly. and the “buttons” wrap to the next line they overlap into the login bars… doesn’t look as it should! any help would be great;

Screenshot 2024-02-02 020242
Screenshot 2024-02-02 020242738×1391 31.5 KB

My HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='Resources/CSS/styles.css' type='text/css'/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Welcome To The Show</title>
</head>
    <header>
        <div class="button" id="Welcome">
            <h3>Welcome</h3>
        </div>
        <nav class="NavBar">
                <div class="button" id="link">
                    <h3><a href="#">Home</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">Beers</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">Bourbon</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">■■■■■■■■</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">Store</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">About Us</a></h3>
                </div>
                <div class="button" id="link">
                    <h3><a href="#">Contact Us</a></h3>
                </div>
        </nav>
        <div class="button" id="login">
            <form action="submission.html" method="GET" class="Submit"> 
                <label for="username" class="username">Username:</label>
             <input id="username" name="username" type="text" required="" minlength="3" maxlength="15">
                <label for="pw" class="pw">Password:</label>
            <input id="pw" name="pw" type="password" required="" minlength="8" maxlength="15">
            <input type="submit" value="Submit" class="submit">
              </form>
            </div>
    </header>
<body>
    <div id="title">
        <h1>Welcome to the Show!</h1>
    </div>
    <div>
        <p>This will be a cool page....hopefully.</p>
    </div>

</body>

</html>

My CSS:

body {
    margin: 0;
    border: 0;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    background-color: rgba(1, 100, 182, 0.877);
    font-size: 16px;
  }
nav {
    width: 100%;
    display: flex;
    height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid white;
    flex-wrap: wrap;
    z-index: 9999;
  }
.button {
    background-color: dodgerblue;
    height: 50px;
    border: 1px solid lightgrey;
    flex-basis: 150px;
    flex-shrink: 1;
    flex:1;
    line-height: 10px;
  }
  a {
    color:black;
    text-decoration: none;
  }
  #Welcome {
    line-height: .5px;
    font-size: 1.5rem;
    min-width: 300px;
    text-transform: uppercase;
   }
   #link:hover {
    background-color: rgb(0, 174, 255);
   }
   #link:active {
    background-color: rgb(113, 210, 255);
   }
   #link.button {
    min-width: 150px;
   }
#login {
  background-color: dodgerblue;
  border: 1px solid lightgrey;
  line-height: 50px;
  flex-wrap: wrap;
}
#title {
  padding-top: 50px;
}

Anything you can do to help or point me in the right direction will help! thank you!