How can I ensure my CSS styles get correctly applied to items that have been mapped from an array

Question

I am building a project with react for my personal portfolio. It is almost done but I am having some challenges. I have some products in an array which I mapped to get the Items I am displaying on the screen. However, the CSS styles I applied to the code are not getting applied uniformly.

I have uploaded the website on GitHub and it can be viewed through https://chinomso1995.github.io/dodosPizza/. The problem appears on the mobile view. In all sections, there is at least one item that is out of place but the issue is quite prevalent in the drinks section.

This is the JSX code for the array (drinks section)

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}
]

This is the JSX code for the drinks section itself.

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>
  )
}

The CSS code (mobile version)

@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;
 }
}

Answer 1

By setting max-width to 60% you are only telling browser that this element should not exceed the 60% of the space.

If this div has content which is small, it will fill its content. So the problem is that some titles/headers are small enough and cause this problem in such small screens.

By setting the width to 100% you "force" the div to occupy all the space left, leading to titles all aligning to the left, as required.