I've been attempting to include an additional div, but it consistently appears as the second row.. I want all of them to be on the same row and aligned with each other.
Here is the HTML code:
<div class="content-grids">
<div class="wrap">
<div class="content-grid">
<div class="content-grid-info">
<h3>All inclusive Packages</h3>
<p>Airfares + Accommodation (ocean View) + 3 Meals daily + House Beverages + Activities (incl Kids Club)</p>
<div class="content-grid-info">
<h3>4 nights $1,299</h3>
</div>
<div class="content-grid-info">
<h3>7 nights $1,189</h3>
</div>
</div>
</div>
</div>
This is the CSS:
.content-grids {
padding: 3.5em 0 3.7em 0;
margin: 0 0 40px 0px;
}
.content-grid-info p{
font-size: 0.875em;
padding: 5px 0 5px 0;
line-height: 1.5em;
}
.content-grid-info h3{
font-size: 1.8em;
font-weight: 400;
Despite making updates and changes in the style sheet, the issue persists.