I'm working on a layout with a container containing multiple cards. I want each card to align from the left border of the container to the right border, similar to the code snippet below.
<html>
<style>
.container {
display: flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
}
.card{
border:1px solid black;
}
</style>
<body>
<div class="container">
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
<div class="card">
<h2>I'm a card</h2>
</div>
</div>
</body>
</html>However, I noticed that the last two elements have too much space between them. Can someone help me remove this extra spacing?
I've experimented with adding margin-left/right properties to achieve the desired effect, but the corner cards still don't touch the borders. Any suggestions?
Edit: Here is what I expect:
https://i.sstatic.net/vxlcy.pngAnd here is what I currently get:
https://i.sstatic.net/3Fe9q.png