here is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/style.css">
<title>responsive page layout exercise 3</title>
</head>
<body>
<!-- main division start -->
<div class="main">
<!-- section 1 start -->
<section>
<div class="sideImageWithContent">
<!-- image for the section1 start -->
<div class="imageWrapper">
<img src="../images/img-Flower.jfif" alt="flower image" class="sideImage">
</div>
<!-- image for the sectuion1 end -->
<!-- content for the section1 start -->
<div class="content">
My favourite flower is rose. I like other flowers too but I find the rose to be the most beautiful
among all flowers. It
is also called the king of flowers. They come in many colours so it offers great variety.
For instance, they are available in red, pink, white, yellow, blue and more. My favourite is the
white rose. Even though
the rose has small and sharp thorns on its stem, people love picking roses.
It looks beautiful when it blooms in the garden or is kept at the florist’s shop. Often we see the
rose as a symbol of
beauty and love. The rose has soft petals and a very sweet fragrance. It comes in use in many
ceremonies for decorations
purposes.
Moreover, garlands of roses are used in places of worship. Similarly, it is a great flower which
always stands out from
the rest of the flowers. I have planted roses in my garden as well with the help of my grandfather.
</div>
<!-- content for the section1 start -->
</div>
</section>
<!-- section 1 end -->
<!-- section 2 start -->
<section>
<!-- card image and image content for the section2 start -->
<div class="cardGallery">
<div class="card">
<img src="../images/img-duck.jfif" alt="duck image" class="imageCard">
<p class="content">
this is the picture of baby duck.
</p>
</div>
<div class="card">
<img src="../images/img-lion.jfif" alt="lion image" class="imageCard">
<p class="content">
this is the picture of lion.
</p>
</div>
<div class="card">
<img src="../images/img-rabbit.jfif" alt="rabbit image" class="imageCard">
<p class="content">
this is the picture of two rabbit
</p>
</div>
<div class="card">
<img src="../images/img-zeebra.jfif" alt="zeebra image" class="imageCard">
<p class="content">
this is the picture of zeebra
</p>
</div>
</div>
<!-- card image and image content for the section2 end -->
</section>
<!-- section 2 end -->
</div>
<!-- main division end -->
</body>
</html>
in css of second section I gave each card width of 24% and margin from right is 1% so in first image it is good from the left side but from right side it still not same as upper section space from the right side. if i give margin from the left and right both than it will not be same as section 1 how much width for each image card and margin should i give so that 4of the images can have same space from the left and right as section1
here is my CSS code
* {
background-color: #eee;
box-sizing: border-box;
}
/* css for the sideImageWithContent start */
.main .sideImageWithContent {
width: 100%;
}
/* css for the image div sideImageWithContent */
.main .sideImageWithContent .imageWrapper {
height: 400px;
width: 30%;
background-color: #aaa;
float: left;
border: 1px solid black;
}
.main .sideImageWithContent .imageWrapper .sideImage {
width: 100%;
height: 399.96px;
display: inline-block;
}
/* css for the content sideImageWithContent */
.main .sideImageWithContent .content {
background-color: #bbb;
height: 400px;
width: 69%;
margin-left: 1%;
display: inline-block;
padding: 10px;
}
/* css for the sideImageWithContent end */
/* css for the cardGallery start */
/* css for cardGallery card div */
.main .cardGallery .card {
float: left;
border: 1px solid black;
mmargin: 1% 1% 1% 0%;
width: 24%;
height: 350px;
}
/* css for image in card div of cardGallery*/
.main .cardGallery .card .imageCard {
width: 100%;
height: 300px;
}
/* css for the content in card div of cardGallery*/
.main .cardGallery .card .content {
font-size: 15px;
text-align: center;
}
/* css for the cardGallery end */
/* media query start from here */
/* media query for those devices whose width is between 0px and 576px (mobile device) */
@media screen and (min-width:0px) and (max-width:576.98px) {
.main .sideImageWithContent .imageWrapper {
width: 100%;
}
.main .sideImageWithContent .content {
height: fit-content;
width: 100%;
margin: 10px 0px 10px 0px;
}
.main .cardGallery .card {
margin: 10px 14px 0px 0px;
height: 350px;
width: 100%;
}
}
/* media query for those devices whose width is between 578px and 768px (tablet device) */
@media screen and (min-width:578px) and (max-width:767.98px) {
.main .sideImageWithContent .imageWrapper {
width: 47%;
height: 460px;
}
.main .sideImageWithContent .imageWrapper .sideImage {
height: inherit;
}
.main .sideImageWithContent .content {
height: 460px;
font-size: medium;
padding: 18px;
width: 50%;
}
.main .cardGallery .card {
float: left;
border: 1px solid black;
margin: 10px 10px 0px 0px;
width: 100%;
height: 350px;
}
.main .cardGalleryon .card {
width: 365px;
margin: 21px 18px 10px -7px;
}
}
/* media query for those devices whose width is between 768px and 1024px (ipad devices) */
@media screen and (min-width:768px) and (max-width:1024.98px) {
.main .sideImageWithContent .content {
width: 68%;
}
.main .cardGallery .card {
width: 49%;
margin: 10px 6px 12px 0px;
height: 288px;
}
.main .cardGallery .card .imageCard {
height: 238px;
}
}
/* media query for Nest hub max device */
@media screen and (device-height:800px) and (device-width:1280px) {
.main .sideImageWithContent .imageWrapper {
margin-left: 15px;
}
.main .cardGallery .card {
margin: 10px 14px 0px 18px;
width: 284px;
}
}
/* media query for nest hub */
@media screen and (device-width:1024px) and (device-height:599.99px) {
.main .sideImageWithContent .imageWrapper {
height: 400px;
width: 30%;
background-color: #aaa;
float: left;
margin-left: 10px;
border: 1px solid black;
}
.main .cardGallery .card {
margin: 11px 0px 10px 10px;
width: 49%;
height: 290px;
}
}
here is the image as you can see image card don't have same space from the right side as section1
I tried to increase width of div and margin-right but last image is not having same space as first section. how can I give width and margin to each card so that i can get same space from left and right side as in section1.
/* css for cardGallery card div */
.cardGallery {
display: flex;
justify-content: space-between;
}
.main .cardGallery .card {
/* float: left; */
border: 1px solid black;
margin: 20px 0 0 0;
width: 24%;
height: 350px;
}