how to remove white space to the right of flexbox container? - html

Question

I'm trying to use flexbox to create a responsive layout of a product list page but this code leaves a lot of whitespace to the right of the page, ive tried using justify-content:space-between but that did not work as well. Adding overflow:hidden to .container class did nothing as well.
edit:someone said it works fine on their end but this is how
my screen looks
*{
margin:0;
padding: 0;
box-sizing: border-box;
text-transform: capitalize;
text-decoration: none;
transition: all .2s linear;
}
body{
overflow-x: hidden;
}
.container{
min-height: 100vh;
display:flex;
flex-direction: row;
justify-content:center;
flex-wrap: wrap;
padding: 40px 0;
}
.card{
height:500px;
width:280px ;
overflow: hidden;
position: relative;
align-self: center;
margin: 40px;
}
.card img{
width: 100%;
height: 80%;
object-fit: cover;
}
.card .info
{
text-align: center;
line-height: 25px;
}
.card .info .stars i
{
color: gold;
padding: 10px 0;
}
.card .info .price{
font-size: 20px;
color:#f00333;
letter-spacing: 1px;
}
.card .info h3{
color: #333;
padding-top: 5px;
}
.card .discount
{
position: absolute;
top:15px;
left:15px;
height:50px;
width:50px;
display: grid;
background-color: rgba(255, 0, 0, 0.6);
color:#fff;
font-weight: bold;
border-radius: 50%;
text-align: center;
line-height: 50px;
}
.card .panel
{
position: absolute;
top:15px;
right: -50%;
width: 45px;
background: rgba(255, 255, 255, 0.644);
display: flex;
align-items: center;
flex-flow: column;
}
.card:hover .panel{
right: 15px;
opacity: 1;
}
.card button
{
position: absolute;
left:50%;
bottom: 0%;
height: 40px;
width: 140px;
border: none;
outline:none;
background: rgba(0,0,0,0.6);
color:#fff;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transform: translateX(-50%);
opacity: 0;
transition-delay: .2s;
}
.card:hover button{
opacity: 1;
bottom: 25%;
}
.card button:hover{
background: (255,0,0,0.6);
}
.card .panel a{
font-size: 20px;
color: #333;
margin: 15px 0;
}
.card .panel a:hover{
color: rgba(255,0,0,0.9);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
<div class="card">
<img src="assets/women1.jpeg" alt="">
<span class="discount">-20%</span>
<div class="panel">
</div>
<button>add to cart</button>
<div class="info">
<h3>women's clothing</h3>
<div class="stars">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
</div>
<strong class="price">$100/-</strong>
</div>
</div>
</div>

Answer 1

It Works Fine.
In Your Browser do a hard refresh.
I hope it will do the job done.
Hard Refresh : Ctrl + F5
Click here. It are some docs on hard Refresh If you want to know more.
Or If Nothing Works use position : absolute or Bootstrap.