Make responsive menu same width as picture/header above

Question

I have a header with a picture in it, and I'd like to have a navigation menu below that that matches the width as I narrow my window. Currently, my header and picture scale fine, but my menu buttons do not. At an early point, the window becomes too narrow and the menu buttons go onto a separate line. How can I make the menu match the image width? Below are the relevant code and an image to show the issue.

https://i.sstatic.net/G4uGD.jpg

HTML for header and menu:

<div id="wrapper1">
        <div id="header">
            <div id="logo">
                    <img src="Images/logolow.jpeg"/>
                </picture>  
            </div>  
            <div id="login">
                    <fieldset>
                    <Legend>Login</Legend>
                    Username <input type="text" name="username"/>
                    Password <input type="password" name="password"/>
                    <input type="submit" value="Login">
                    <div id="register">
                        <a href="Assignment1-Register.html">Not a member? Click here to register!</a>
                    </div>
                    </fieldset>     
            </div>
        </div>
        <div id="sidebar">
        <a href=""> Home</a><a href=""> Search</a><a href=""> All Profs</a><a href=""> Submit</a><a href="#contact"> Contact</a>
        </div>
</div>

CSS:

#wrapper1{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    font-family: Helvetica, Verdana, Arial;
}

#header {
    width: 100%;
    position: relative;
}

#logo {
    height: 450px;
    width: 100%;
} 

#logo img {
    height: 100%;
    width: 100%;
}

#login {
    bottom: 0px;
    right: 0px;
    width: 15%;
    color: white;
    position: absolute;
}

#login a {
    color: inherit 
}

#register {
    font-size: 14px;
}

#login fieldset { 
    display: block;
    border: 2px solid white;
}

#sidebar {
    margin: 14px;
    width: 100%;
}

#sidebar a {
    height: 40px;
    padding-top: 10px;
    padding-left: 6.55%;
    padding-right: 6.55%;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    background-color: black;
    color: white;
    border-style: outset;
    border-width: 1px;
    text-decoration: none;
}

Answer 1

Here is one solution.

Use percentage widths on your links that add up to 100%. Make sure not to use display: inline-block; on those links as extra whitespace is added to inline elements and would make their total size over 100% of the parent element.

header img {
  display: block;
  max-width: 100%;
}
nav {
  margin-left: -5px;
  margin-right: -5px;
}
nav a {
  box-sizing: border-box;
  display: block;
  float: left;
  width: calc( 25% - 10px );
  margin: 0 5px;
  padding: 0.5rem 1rem;
  color: white;
  text-align: center;
  background-color: #999;
  
}

<header>

  <img src="http://placehold.it/1600x400?text=hero-image">
  
  <nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
  </nav>
  
</header>

For larger screens you'll need:

• A larger image, or
• A larger image and/or switch max-width: 100%; to width: 100%; (careful, if image is stretched beyond it's native size it will pixelate), or
• Restrain the max width of the navigation links.