当我向右展开窗口时，欢迎消息和背景图像也会向右移动；但是，它下面的导航不会移动。我该怎么做才能让它们一起移动？
#flower-background-1 {
background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
height: 300px;
width: 900px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
}
#welcome {
font-family: 'Great Vibes', cursive;
font-size: 50px;
border: 2px solid white;
color: white;
width: auto;
text-align: center;
position: relative;
bottom: 150px;
background-color: indigo;
}
nav {
display: inline-block;
padding: 100px;
position: relative;
bottom: 170px;
left: 80px;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Test.css">
<title>My Flower Shop</title>
</head>
<div id="flower-background-1"></div>
<div id="welcome">Welcome to My Flower Shop</div>
<body>
<header>
<div class="navigation">
<nav id="Home">HOME</nav>
<nav id="About Us">ABOUT US</nav>
<nav id="Contact Us">CONTACT US</nav>
</div>
这就是您想要的吗？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container {
width: 95%;
margin: 0 auto;
}
#flower-background-1 {
background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
background-repeat: no-repeat;
background-position: center;
max-height: 300px;
height: 300px;
margin-left: auto;
margin-right: auto;
}
#welcome {
font-family: 'Great Vibes', cursive;
font-size: 50px;
border: 2px solid white;
color: white;
width: auto;
text-align: center;
position: relative;
bottom: 150px;
background-color: indigo;
}
nav {
padding: 100px;
background-color: black;
color: white;
}
nav a {
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="flower-background-1"></div>
<div id="welcome">Welcome to My Flower Shop</div>
<header>
<nav class="navigation">
<a id="Home">HOME</a>
<a id="About Us">ABOUT US</a>
<a id="Contact Us">CONTACT US</a>
</nav>
</header>
</div>
</body>
</html>