I am working on a website (html), and am having some trouble making elements line up properly. Right now, my page looks like HERE, but I want it to look like HERE. Essentially, I want to create a 2 by 2 grid. I don't know which part of the code is not permitting me from having 2 elements on one line.
Thanks in advance for your help!
<title></title><style type="text/css">body {
color: #404040;
font-size: 14px;
line-height: 22px;
padding-top: 20px;
}
.card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
margin: 5px;
position: relative;
margin-bottom: 50px;
transition: all .2s ease-in-out;
}
.card:hover {
/*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin-bottom: 54px;
}
.image {
height: 200px;
opacity: .7;
overflow: hidden;
transition: all .2s ease-in-out;
}
.image:hover,
.card:hover .image {
height: 200px;
opacity: 1;
}
.text {
background: #FFF;
padding: 20px;
min-height: 200px;
}
.text p {
margin-bottom: 0px;
}
.fab {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
margin-top: -50px;
right: 20px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
color: #fff;
font-size: 48px;
line-height: 48px;
text-align: center;
background: #0066A2;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.fab:hover {
background: #910500;
cursor: pointer;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style><div class="container"><div class="row"><div class="col-md-3 col-lg-3 col-xs-3 col-sm-3"><div class="card"><div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div><div class="text"><div class="fab">+</div><h3>Our Community</h3><p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p></div></div></div></div></div><div class="container"><div class="row"><div class="col-md-3 col-lg-3 col-xs-3 col-sm-3"><div class="card"><div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div><div class="text"><div class="fab">+</div><h3>Our Community</h3><p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p></div></div></div></div></div><div class="container"><div class="row"><div class="col-md-3 col-lg-3 col-xs-3 col-sm-3"><div class="card"><div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div><div class="text"><div class="fab">+</div><h3>Our Community</h3><p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p></div></div></div></div></div><div class="container"><div class="row"><div class="col-md-3 col-lg-3 col-xs-3 col-sm-3"><div class="card"><div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div><div class="text"><div class="fab">+</div><h3>Our Community</h3><p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p></div></div></div></div></div>