Https://www.codecademy.com/courses/learn-html-css/lessons/adding-images/exercises/img-width-height?action=lesson_resume

Community
1

1366×768 375 KB

HTML :

Best Sellers

/* image source */

The Monarch

The Monarch Bike is our original beach cruiser. It's perfect for strolling bike rides down beach promenades and small enough to stash just anywhere.

$200.00

Buy 
<div class="product">
 /* image source */
  <h3>The Sunny</h3>
  <p>Our most popular beach cruiser, adorned with a white basket and bell for those who use their cruiser for any of those weekend errands.</p>
  <h4>$150.00</h4>
  <a href="#" class="btn">Buy</a>
</div>

CSS:

.products {
background: #EEEFF1;
box-sizing: border-box;
width: 90%;
margin: 20px auto;
padding: 20px 0px;
text-align: center;
}

.product {
display: inline-block;
margin: 0px 2% 80px 2%;
text-align: center;
width: 45.5%;
}

.product img {

width:100%;
}

.blue {
color: #14213D !important;
}

I am a new user so i am not able to put more than one image link instead i have put dots.
here in the class product if i set the width more than 45.5% the images comes in block form.
I should be able to set the width (of product) to max 46% because one product = 4% margin(left 2% + right 2%) +46%width of content=50% of width so there is more 50% so one more image can fit in but it dosent .
i can set max 45.5% so if we add (45.5% +4)%= 49.5% * 2(2nd image)=99%.

WHERE IS THAT 1% GOING?