Question posted in 
I’ve created two cards on a site I am building. I would like them to span the entire div but I cannot get them to span the width without their size being giant. Ideally, I would like to make the cards shorter height and longer width to span the div. The first image below is what I have now, the second image is what I would like it to become.
The current code that I have for this area follows. Any insight is helpful, thanks!
.alignment {
display: flex;
justify-content: space-between;
column-gap: 2%;
padding-bottom: 6%;
}
.container {
padding: 2px 16px;
height: 20%;
width: 100%;
}
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 5px 13px 0 #000;
border-radius: 15px;
background-color: #121212;
border-color: #121212;
flex-grow: -1;
width: 30%;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 8px 16px 0 000;
}
.card img {
border-radius: 15px 15px 0px 0px;
}
.card h3 {
padding-top: 30px;
}
.card h4 {
padding-top: 20px;
margin-bottom: 24px;
}
#content > div.news > div.alignment.show > div:nth-child(1) > div > h4 {
text-align: left;
font-size: 28px;
margin-bottom: 24px;
}
#content > div.news > div.alignment.show > div:nth-child(1) > div > p {
text-align: left;
font-size: 18px;
}
#content > div.news > div.alignment.show > div:nth-child(2) > div > h4 {
text-align: left;
font-size: 28px;
margin-bottom: 24px;
}
#content > div.news > div.alignment.show > div:nth-child(2) > div > p {
text-align: left;
font-size: 18px;
}
.card p {
margin-top: -8px;
}
.card .link-a {
margin-bottom: 16px;
}<div class="alignment">
<div class="card">
<img src="image.png" alt="Avatar">
<div class="container">
<!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> -->
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p>
</div>
</div>
<div class="card">
<img src="image.png" alt="Avatar" style="">
<div class="container">
<!-- <h3 style="margin-bottom: 10px;"><span class="small">Lorem Ipsum</span></h3> -->
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="link-a" style="font-size: 15px;"><a href="next-best-actions">CTA Link</a></p>
</div>
</div>
</div>Current Display:
Future Display:
2
Answers
Isn’t this what you need?
Additional styles:
Can you try this?
I don’t know why you used column-gap as % but I think it would be natural not to change depending on the width of the device.