HTML/CSS新手求助 实现菜单居中、卡片排版及按钮定位三个需求

修复后的完整代码 #

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vinería Baco</title>
    <!--link css-->
    <link rel="stylesheet" href="./estilos.css">
</head>
<body>
    <!--seccion hero/banner-->
    <header>
        <h1 class="h1_rojo">Vinería Baco</h1>
        <h2 class="h2_turquesa">El mejor vino de todo Berisso</h2>
    <!--Menu de navegacion-->
      <nav>
        <ul>
          <li class="menu menu__item"><a href="./contacto.html">Contactanos</a></li>
          <li class="menu menu__item"><a href="https://www.facebook.com/martin.prozapas">Facebook</a></li>
          <li class="menu menu__item"><a href="https://www.instagram.com/elonofficiall/?hl=es">Instagram</a></li>
          <li class="menu menu__item"><a href="./nosotros.html">Acerca de nosotros</a></li>
        </ul>
      </nav>
    </header>
    <!--Seccion main-->
    <main>
        <!--cards 1 to 2-->
        <div class="card1">
          <div class="card-item">
            <a href="./vino-tinto.html"><img alt="vino tinto" src="../img/tintos/tintos.jpg" width="150" height="70"></a>
            <button type="button">Comprar</button>
          </div>
          <div class="card-item">
            <a href="./vino-blanco.html"><img alt="vino blanco" src="../img/blancos/blancos.jpg" width="150" height="70"></a>
            <button type="button">Comprar</button>
          </div>
        </div>
        <!--cards 3 to 4-->
        <div class="card2">
          <div class="card-item">
            <a href="./vino-rosado.html"><img alt="vino rosado" src="../img/rosados/rosados.jpg" width="150" height="70"></a>
            <button type="button">Comprar</button>
          </div>
          <div class="card-item">
            <a href="./vino-especial.html"><img alt="vinos especiales" src="../img/especiales/especiales.jpg" width="150" height="70"></a>
            <button type="button">Comprar</button>
          </div>
        </div>
    </main>
    <br><br>
    <!--Seccion footer-->
    <footer>
        <h4>2021 | Hecho por MGP | 2021</h4>
    </footer>
</body>
</html>

CSS

/*HERO SECTION*/
/*Encabezados*/
.h1_turquesa {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#00868b;
  text-align: center;
}
.h1_rojo {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:#8b0000;
  text-align: center;
}
.h1_azul {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(138, 43, 226);
  text-align: center;
}
.h1_verde {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color: rgb(0, 128, 0);
  text-align: center;
}
h2 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  color:rgb(139, 0, 139);
  text-align: center;
}
/*Párrafos*/
.parr {
    display: block;
    font-size: 18px;
    color: black;
    text-align: justify;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
/*Fondo*/
body {
  background-color: rgb(197, 189, 170);
}
/*Imágenes*/
img {
    display: block;
    max-width:500px;
    max-height:500px;
    width: auto;
    height: auto;
}
/*MENU*/
/* 导航居中样式 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}
.menu {
  background-color: rgb(175, 76, 122); 
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
}
.menu__item a {
  text-decoration: none;
  color: white;
} 
/*MAIN*/
/*Card section*/
/* 单个卡片容器样式，实现按钮在图片正下方 */
.card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.card1{
  display: flex;
  background-color: rgb(197, 189, 170);
  margin: 10px auto;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
.card2{
  display: flex;
  background-color: rgb(197, 189, 170);
  margin: 10px auto;
  width: 60%;
  justify-content: space-between;
  align-items: center;
} 
button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
/*FOOTER*/
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0px;
}

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