spacing issue in html/css

Question

I have the following code:

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { margin-top: 0; margin-bottom: 0; } .container1 { display: flex; gap: 360px; /* This seems to cause the problem */ width: 100%; margin: 0 auto; padding: 20px; justify-content: center; overflow: hidden; } .square { position: relative; margin-top: 0; margin-bottom: 0; max-width: 460px; height: 100% !important; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square1:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square .square-image img { width: 100%; height: 220px; object-fit: cover; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 5px solid #555; } .square1 .square-image1 img { width: 100%; height: 220px; object-fit: cover; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 5px solid #555; } .square .square-details { padding: 20px 30px 30px; } .square1 .square-details1 { padding: 20px 30px 30px; } .h11 { margin: auto; text-align: left; font-family: 'Merriweather', serif; font-size: 24px; } p0 { text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; margin-top: 10px; display: block; } .button56 { background-color: #0563bb; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; font-size: 12px; margin-top: 18px; margin-bottom: 0; cursor: pointer; font-family: 'merriweather'; } .button56:hover { opacity: 0.9; color: white; } .parent-div { display: flex; flex-wrap: nowrap; justify-content: center; } @media screen and (max-width: 480px) { .parent-div { flex-direction: column; } } @media screen and (max-width: 480px) { .square { margin-bottom: 0; margin-right: 0; margin-left: 0; margin-top: 0; } } @media screen and (max-width: 480px) { .square .square-image img { height: 230px !important; border: 5px solid #555; } } .square1 { position: relative; margin-top: 0; margin-bottom: 0; max-width: 460px; height: 100% !important; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } @media screen and (max-width: 480px) { .square1 { margin-bottom: 0; margin-right: 0; margin-left: 0; margin-top: 54px; } } @media screen and (max-width: 480px) { .square1 .square-image1 img { height: 230px !important; border: 5px solid #555; } }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <div class="row1"> <div class="container1"> <div class="square"> <div class="square-image"> <img src="assets/img/Blog1.png"> </div> <div class="square-details"> <h3 class="h11">“Chances Of My Uni/College Admission?”</h3> <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0> <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div> </div> </div> <div class="square1"> <div class="square-image1"> <img src="assets/img/Blog2.png"> </div> <div class="square-details1"> <h3 class="h11">My Career Advice To You: Take These Steps...</h3> <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0> <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </section>

I have the above code embedded in a website and so on my end, the output is looking like this on 50% zoom out on page

This is exactly what I want, but when I zoom in to 100%, then my output is looking like this:

See how the end corners are not aligned anymore? If you still cannot see the problem, then refer to the following picture:

See how the corners circled in orange do not align anymore? How would I fix that? I know the gap: 360px is causing the issue but how would I change it so that whatever the user zooms out to, the alignment of the corners never changes? Any suggestions?

Answer 1

Instead of using gap property use margin-left and margin-right for the space between the cards and check the below cards padding to align corner in same line

 @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .blogmaster { margin-top: 0; margin-bottom: 0; } .container1 { display: flex; width: 100%; flex-wrap: wrap; } .square { position: relative; margin-top: 0; margin-bottom: 0; max-width: 460px; height: 100% !important; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin-left: auto; margin-right: auto; } .square:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square1:hover { -webkit-transform: translate(20px, -10px); -ms-transform: translate(10px, -10px); transform: translate(10px, -10px); -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); } .square .square-image img { width: 100%; height: auto; object-fit: cover; } .square1 .square-image1 img { width: 100%; height: auto; object-fit: cover; } .square1 .square-image1, .square .square-image{ border-top-left-radius: 4px; border-top-right-radius: 4px; border: 5px solid #555; height: 220px; overflow:hidden; } .square .square-details { padding: 20px 30px 30px; } .square1 .square-details1 { padding: 20px 30px 30px; } .h11 { margin: auto; text-align: left; font-family: 'Merriweather', serif; font-size: 24px; } p0 { text-align: justify; font-family: 'Open Sans', sans-serif; font-size: 12px; color: #C8C8C8; line-height: 18px; margin-top: 10px; display: block; } .button56 { background-color: #0563bb; color: white; width: 100px; padding: 10px 18px; border-radius: 3px; text-align: center; text-decoration: none; display: block; font-size: 12px; margin-top: 18px; margin-bottom: 0; cursor: pointer; font-family: 'merriweather'; } .button56:hover { opacity: 0.9; color: white; } .parent-div { display: flex; flex-wrap: nowrap; justify-content: center; } @media screen and (max-width: 480px) { .parent-div { flex-direction: column; } } @media screen and (max-width: 480px) { .square { margin-bottom: 0; margin-right: 0; margin-left: 0; margin-top: 0; } } @media screen and (max-width: 480px) { .square .square-image img { height: 230px !important; border: 5px solid #555; } } .square1 { position: relative; margin-top: 0; margin-bottom: 0; max-width: 460px; height: 100% !important; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; margin-left: auto; margin-right: auto; } @media screen and (max-width: 480px) { .square1 { margin-bottom: 0; margin-right: 0; margin-left: 0; margin-top: 54px; } } @media screen and (max-width: 480px) { .square1 .square-image1 img { height: 230px !important; border: 5px solid #555; } }

 <section> <div class="section-title"> <h2>Featured Blogs Of The Day</h2> </div> <div class="row1"> <div class="container1"> <div class="square"> <div class="square-image"> <img src="assets/img/Blog1.png"> </div> <div class="square-details"> <h3 class="h11">“Chances Of My Uni/College Admission?”</h3> <p0>It is that time of the year again (yay!🙂) where we — high school students — are supposed to fill out the applications and land in our dream Universities/Colleges!</p0> <div><a href="https://m-hussainomer03.medium.com/chances-of-my-uni-college-admission-20bc0efec0af" target="_" class="button56">Read More</a></div> </div> </div> <div class="square1"> <div class="square-image1"> <img src="assets/img/Blog2.png"> </div> <div class="square-details1"> <h3 class="h11">My Career Advice To You: Take These Steps...</h3> <p0>Humans tend to make mistakes — and its completely normal as it results in the growth and development of an individual — either psychologically or physically.</p0> <div><a href="https://m-hussainomer03.medium.com/my-career-advice-to-you-take-these-steps-to-ultimate-prosperity-6c0687ce9c9f" target="_" class="button56">Read More</a></div> </div> </div> </div> </div> </section>

now you can adjust the container width with media query to adjust according to screen size to get exact result as below card.

Also fixed the overflowing image in the card issue