我是使用 html、css flexbox 创建网站的初学者，我已将网站标题的完整宽度设置为 1000px。标题徽标应从 50px 开始位置，导航栏应从 600px 开始位置。我尝试过的内容附在下面。它已显示，但我写得是否正确，请检查我
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Design</title>
<style>
body {
margin: 0;
padding: 0;
}
.header {
display: flex;
width: 1000px;
background-color: red;
align-items: center;
padding: 0 50px; /* Adjust padding to align the logo */
box-sizing: border-box; /* Ensure padding is included in width */
height: 100px;
}
.logo {
flex: 0 0 auto;
font-size: 24px;
color: black;
}
.spacer {
flex: 0 0 500px; /* Fixed spacer to push the nav */
}
.nav {
display: flex;
gap: 20px;
}
.nav a {
text-decoration: none;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="spacer"></div>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header Design</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center; /* Center the header horizontally */
}
.header {
display: flex;
width: 1000px;
background-color: red;
align-items: center;
padding: 0 50px; /* Adjust padding to align the logo */
box-sizing: border-box; /* Ensure padding is included in width */
height: 100px;
}
.logo {
flex: 0 0 auto;
font-size: 24px;
color: black;
}
.nav {
display: flex;
gap: 20px;
margin-left: auto; /* Push the nav to the right */
}
.nav a {
text-decoration: none;
color: black;
font-size: 18px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="nav">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact Us</a>
</div>
</div>
</body>
</html>
.nav 容器使用 margin-left: auto 将其推到右侧，确保导航栏从相对于徽标的固定位置开始。