如何确保CSS样式正确应用于从数组映射的项目

我正在建立一个对我的个人档案有反应的项目。差不多完成了，但是我遇到了一些挑战。我将一些产品映射到一个数组中，以映射到要在屏幕上显示的项目。但是，我应用于代码的CSS样式并没有得到统一应用。

我已经将该网站上传到GitHub，可以通过https://chinomso1995.github.io/dodosPizza/进行查看。该问题出现在移动视图中。在所有部分中，至少有一项不合时宜，但问题在饮料部分中非常普遍。

这是数组的JSX代码（饮料部分）

export const Drinks = [
  {id: 1, name:'Coca-Cola', details: '0.5 l', price: '300', image: cocaColaOne},
  {id: 2, name:'Coca-Cola', details: '1 l', price: '500', image: cocaColaTwo},
  {id: 3, name:'Coca-Cola Zero', details: '0.5 l', price: '300', image: cocaColaThree},
  {id: 4, name:'Fanta', details: '0.6 l', price: '300', image: fantaOne},
  {id: 5, name:'Fanta', details: '1 l', price: '500', image: fantaTwo},
  {id: 6, name:'Sprite', details: '0.6 l', price: '300', image: spriteOne},
  {id: 7, name:'Sprite', details: '1 l', price: '500', image: spriteTwo},
  {id: 8, name:'Beer Heineken', details: '0.33 l', price: '500', image: heinekenBeer},
  {id: 9, name:'Schweppes Chapman', details: '0.33 l', price: '300', image: schweppesChapman},
  {id: 10, name:'Schweppes Pineapple', details: '0.33 l', price: '300', image: schweppesPineapple},
  {id: 11, name:'Schweppes Virgin Mojito', details: '0.33 l', price: '300', image: schweppesVirginMojito},
  {id: 12, name:'Eva Still Water', details: '0.75 l', price: '200', image: evaWater},
  {id: 13, name:'Juice 5 Alive Apple', details: '0.35 l', price: '200', image: fiveAliveAppleOne},
  {id: 14, name:'Juice 5 Alive Apple', details: '0.9 l', price: '700', image: fiveAliveAppleTwo},
  {id: 15, name:'Juice 5 Alive Orange', details: '0.35 l', price: '200', image: fiveAliveOrangeOne},
  {id: 16, name:'Juice 5 Alive Orange', details: '0.9 l', price: '700', image: fiveAliveOrangeTwo},
  {id: 17, name:'Juice 5 Alive Tropic', details: '0.35 l', price: '200', image: fiveAliveTropicOne},
  {id: 18, name:'Juice 5 Alive Tropic', details: '0.9 l', price: '700', image: fiveAliveTropicTwo},
  {id: 19, name:'Americano', details: 'Espresso, hot water, 12 oz', price: '1000', image: americano},
  {id: 20, name:'Cafe Latte', details: 'Espresso, Steamed Milk, 12 oz', price: '1200', image: cafeLate},
  {id: 21, name:'Cappucino', details: 'Espresso, Steamed Milk, Foam Milk, 12 oz', price: '1200', image: cappucino}
]

这是酒类部分本身的JSX代码。

const Drinks = () => {
  const {drinkproducts} =  useContext(ProductsContext);
  const {addProduct, cartItems, increase} = useContext(CartContext);
  const isInCart = drinkproducts => {
    return !!cartItems.find(item => item.id === drinkproducts.id);
}
  return(
    <div className={styles.Drinks} id="drinks">
      <h1>Drinks</h1>
      <div className={styles.DrinksContainer}>
        {drinkproducts.map(drink=>{
          return  <div className={styles.DrinksCard}>
                    <div className={styles.ImageContainer}>
                       <img src={drink.image} alt="cocacola"/>
                    </div>
                    <div className={styles.DrinkHeader}>
                      <div>
                       <h1>{drink.name}</h1>
                       <p>{drink.details}</p>
                      </div>
                     <div className={styles.DrinkFooter}>
                      <h3>₦{drink.price}</h3>
                      {
                       isInCart(drink) && 
                       <button 
                       onClick={() => increase(drink)}>Add more</button>
                     }
                      { !isInCart(drink) &&
                        <button onClick={()=>addProduct(drink)}>
                          <span>from ₦{drink.price}</span>  
                           <span>Add to basket</span>
                        </button>}
                    </div>
                  </div>
                    
                </div>
        })}
      </div>
    </div>
  )
}

CSS代码（移动版）

@media (max-width: 500px){
  .Drinks{
    width: 90%;
   
  }
  .Drinks>h1{
    font-size: 1.4rem;
    font-family: 'Open Sans', sans-serif;
  }
  .DrinksContainer{
    display: flex;
    flex-direction: column;
  }
  .ImageContainer{
    max-width: 30%;
    max-height: 100%;
    margin-left: 0;
  }
  .DrinksContainer img{
    width: 100px;
    height: 100px;
  }

  .Drinks{
    width: 90%;
  }
  .DrinksCard{
    flex-direction: row;
    font-family: 'Open Sans', sans-serif;
    justify-content: space-around;
    align-items: center;
  }
  .DrinkHeader{
    max-width: 60%;
  }
  
  .DrinkFooter button span:first-of-type{
    display: block;
  }
  .DrinkFooter h3{
    display: none;
  }
 .DrinkFooter button span:last-of-type{
  display: none;
}
 .DrinkFooter button{
  padding: 5px;
  height: 30px;
  border-radius: 10px;
  margin-left: 0;
  width: 90px;
 }
}