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: grid;
grid-template-columns: repeat(2, 1fr);
padding: 20px;
overflow: hidden;
}
.square {
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;
}
.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);
}
.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;
}
.square .square-details {
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;
}
@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;
}
}
/* iframe css*/
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.resume .resume-title {
font-size: 26px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 20px;
color: #050d18;
}
.resume .resume-item {
position: relative;
text-align: center;
}
.add {
padding: 0;
}
.iframe {
height: 1070px;
margin-left: auto;
margin-right: auto;
width: 80%;
}
@media all and (max-width: 500px) {
.embed-responsive {
height: auto;
}
.iframe {
height: 130vw;
}
}<section>
<div class="section-title">
<h2>Featured Blogs Of The Day</h2>
</div>
<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>
</section>
<section id="resume" class="resume">
<div class="container">
<div class="section-title">
<h2>IFrame
</h2>
</div>
<div class="resume-item">
<iframe src="https://drive.google.com/file/d/11nfRuy7JVyGX8LY2q9HR5JSqrBpFNtJ4/preview" width="100%" class="iframe"></iframe>
</div>
</div>
</section>I want the corner of the blog card to be perfectly aligned under the corner of the iFrame. The first corner of the blog card should be right under the first corner of the iFrame.
Expected Output
How would I modify the CSS to have it output as the above picture? Adding margin-left: auto on square does not work. Any suggestions would greatly help! Thanks a lot!
