I am creating some tiles to display info on my website, but after every tile, the next tile moves to a new line (auto indents on the physical output, not code). I have tried display: inline-block;, I have tried using <span> and any other solutions.
*
{
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.center {
width:100%;
display: flex;
}
/* End Non-Essential */
.property-card {
margin: 10px;
height:18em;
width:14em;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-ms-flex-direction:column;
flex-direction:column;
position:relative;
-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
border-radius:16px;
overflow:hidden;
-webkit-box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
box-shadow: 15px 15px 27px #e1e1e3, -15px -15px 27px #ffffff;
}
/* ^-- The margin bottom is necessary for the drop shadow otherwise it gets clipped in certain cases. */
/* Top Half of card, image. */
.property-image {
height:6em;
width:14em;
padding:1em 2em;
position:Absolute;
top:0px;
-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
background-image:url('pic/leader.png');
background-size:cover;
background-repeat:no-repeat;
}
.property-image2 {
height:6em;
width:14em;
padding:1em 2em;
position:Absolute;
top:0px;
-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
background-image:url('pic/globe-icon.svg');
background-size:cover;
background-repeat:no-repeat;
}
.property-image3 {
height:6em;
width:14em;
padding:1em 2em;
position:Absolute;
top:0px;
-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
background-image:url('pic/helping-hand-icon-png-23.png');
background-size:cover;
background-repeat:no-repeat;
}
/* Bottom Card Section */
.property-description {
background-color: #FAFAFC;
height:12em;
width:14em;
position:absolute;
bottom:0em;
-webkit-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-o-transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
transition:all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
padding: 0.5em 1em;
text-align:center;
}
/* Property Cards Hover States */
.property-card:hover .property-description {
height:0em;
padding:0px 1em;
}
.property-card:hover .property-image, .property-image2, .property-image3 {
height:18em;
}
.property-card:hover .property-social-icons:hover{
background-color:blue;
cursor:pointer;
} <div class="center">
<div class="property-card">
<div class="property-image">
<div class="property-image-title">
</div>
</div>
<div class="property-description">
<h3> Leadership </h3>
<p>Grow your leadership skills in this team.</p>
</div>
</div>
</div>
<div class="center">
<div class="property-card">
<div class="property-image2">
<div class="property-image-title">
</div>
</div>
<div class="property-description">
<h3> Environment </h3>
<p>Help our blue planet bcome abetter place to live in.</p>
</div>
</div>
</div>
<div class="center">
<div class="property-card">
<div class="property-image3">
<div class="property-image-title">
</div>
</div>
<div class="property-description">
<h3> People </h3>
<p>Help other people that deserve better lives get better lives.</p>
</div>
</div>
</div>Proof this is not a repost or duplicate, I have browsed Stack Overflow, searched the web tired on my own none of the solutions or my work works.
