I have a section with a heading with a separator thingy and then 3 divs that are supposed to sit side-by-side. I’ve tried using Flexbox, but that is also putting the text beside them. I want to put the text above but the three divs side by side. An image of my desired output as well as code snippets is included below.
The HTML code:
<section class="services">
<h2>Our Services</h2>
<br>
<div class="service">
<img
src="./images/SVGs/education.jpg"
alt="Education Logo"
srcset=""
/>
<p>IMMIGRATION THROUGH EDUCATION</p>
<p>
We work with all Canadian universities and colleges! Study in Canada
is the most secure way for immigration to Canada
</p>
<a href="#form" class="apply">Apply Here</a>
</div>
<div class="service">
<img src="./images/SVGs/business.jpg" alt="Business Logo" srcset="" />
<p>IMMIGRATION THROUGH BUSINESS</p>
<p>
There are lots of immigration programs for business owners. Launch
your business in Canada!
</p>
<a href="#form" class="apply">Apply Here</a>
</div>
<div class="service">
<img
src="./images/SVGs/employment.jpg"
alt="Employment Logo"
srcset=""
/>
<p>IMMIGRATION THROUGH EMPLOYMENT</p>
<p>
There are some application processes that will help you to move to
Canada permanently through employment streams.
</p>
<a href="#form" class="apply">Apply Here</a>
</div>
</section>
2
Answers
Maybe you are not giving the flex property to the right element ,
if you want to style them, use this html file and style.css:
style.css:
and your div will be fill all the width and your section content in the same line.