如何修复导航栏右对齐问题及实现红白盒子并排布局（不使用Bootstrap）

修改要点 #

• 完全移除Bootstrap相关依赖，所有布局采用Flexbox实现，符合课程技术要求
• 修复导航栏对齐问题：导航栏开启flex布局后通过justify-content: space-between实现品牌居左、导航项完全居右
• 修复内容区块排版问题：外层内容容器开启flex布局，实现白色、红色区块并排展示
• 替换原img标签为background-image实现图片展示，符合作业要求
• 整体内容容器通过margin: 0 auto实现页面居中
• 保留要求的box-shadow、text-shadow属性效果

完整CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #fff8ca;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff8ca;
  padding: 15px 5%;
}
.navbar-brand {
  font-style: italic;
  font-size: 30px;
  color: brown;
  text-decoration: none;
}
.nav-links {
  display: flex;
  gap: 25px;
}
.nav-links a {
  text-decoration: none;
  color: #333;
}
.image {
  position: relative;
  width: 100%;
  height: 400px;
  background-image: url('1.jpg');
  background-size: cover;
  background-position: center;
}
.image h1 {
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  color: white;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 60px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 20px 5%;
  gap: 20px;
}
.left-block {
  flex: 3;
  padding: 20px;
  background-color: white;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.right-block {
  flex: 1;
  padding: 20px;
  color: white;
  background-color: red;
  box-shadow: inset 0 0 10px #000000;
}
.left-block p, .right-block p {
  margin: 10px 0;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

完整HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <nav class="navbar">
    <a class="navbar-brand">
      Joe's Pizaa Co.
    </a>
    <div class="nav-links">
      <a href="#">Home <span>(current)</span></a>
      <a href="#">About</a>
      <a href="#">News</a>
      <a href="#">Menu</a>
      <a href="#">Locations</a>
    </div>
  </nav>
  <div class="image">
    <h1 class="image-tag">New York's Best Pizaa</h1>
  </div>
  <div class="container">
    <div class="left-block">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, nam!</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestias obcaecati nobis illo reiciendis officiis totam soluta et! Deleniti, excepturi amet.</p>
    </div>
    <div class="right-block">
      <b>Special Offer:</b>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam, sit.</p>
    </div>
  </div>
</body>
</html>

内容的提问来源于stack exchange，提问作者kalebtkr