Hello, I'm having a problem using a grid.css. The following, when using the classes to define the columns, simply does not work. I simply want to align 2 columns side by side.
I'm using this grid: link
Section HTML:
<section class="section-search">
<div class="row">
<h1>SEARCH YOUR VIBE</h1>
</div>
<div class="row">
<div class="col span-1-of-2 steps">
<p>SEARCH WITH ONE OF THE FOLLOWING OPTIONS</p>
<div class="col span-1-of-2 steps">
<p>THEN THE PAGE WILL SWIPE LEFT AND A BUNCH OF VIBES WILL APPEAR</p>
</div>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<input type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<input type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<input type="text" id="artist" placeholder="ARTIST NAME" value=""> <br>
</div>
</div>
<div class="row">
<div class="col span-1-of-4">
<button type="submeter" name="submeter">SEARCH</button>
</div>
</div>
</section>
Section CSS:
/* ----------------------- SECTION SEARCH ---------------------------- */
.section-search::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
margin-top: -10%;
background: url(/img/divider_Prancheta%201.svg);
background-repeat: no-repeat;
overflow: hidden;
z-index: 1;
}
.section-search {
background-color: #e0dddd;
opacity: 80%;
z-index: 2;
}
.steps {
color: #000;
}
.steps:first-child {
float: left;
}
.steps:last-child {
float: right;
}
In this section I want to make 2 columns with the elements "p" and put them side by side, below I want to create a row with the search box that I have in the code.
Note: The link to the css document is correct.
Thank you in advance!