How do I center these items properly? - html

Question

I have the code here but basically the problem is I have these product cards and I am trying to get them in the center but also align them with the other cards if that makes sense.
https://codepen.io/manfreebie/pen/NWNvyGz
Here is a visual of what I want to accomplish vs. what is actually happening. It looks fine at first till you try to resize it.
I have tried to make the cocktail-container have the value flex-start instead of center for the justify-content attribute like this
#cocktails-container {
max-width: 70%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
but that leaves a lot of whitespace on the right side when I resize it. I have tried playing around a little bit with inline-block and using text-align instead but that didn't work either.

Answer 1

Add this code.
#cocktails-container::after {
content: "";
flex: auto;
}

Answer 2

I am only sharing parts that I changed, the rest is the same.
#cocktails-container {
width: 70%; // You can adjust this for your needs
display: flex;
flex-flow: row wrap;
justify-content: start;
}
// Removed margin from .cocktail but added padding to the a tag
.cocktail {
width: 100%;
height: auto;
padding-top: 10px;
text-align: center;
}
a {
width: 33%; // You should adjust this for different screen widths, mobile 100% large 25% etc.
padding: 15px;
box-sizing: border-box; // This is necessary to include padding in '33% width'
}

Answer 3

Please try this code,To How do I center these items properly?
.box {
display: flex;
align-items: flex-start;
height: 200px;
}
.box .selected {
align-self: center;
}
<div class="box">
<div class="selected">Three</div>
</div>
I hope this code will be useful for you.
Thank you.

Answer 4

The issue that I identified while checking the code is that you are using a margin margin: 50px 0px; for the .cocktail class. Change it to the below one.
#media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
Giving margin value 50px 0px; will make the left and right margin to zero in the samller resolution. Update that to 50px auto that will give left and right margins auto value.