skip to Main Content

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>

The Desired Output:enter image description here

2

Answers


  1. 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:

     <section class="services">
                <h2>Our Services</h2>  
               <div class="services-content">
     <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>
    
    </div>
              </section>
    

    style.css:

            section {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
           .services-content {
              display: flex;
              //justify-content: center;
             //align-items: center;
           } 
    

    and your div will be fill all the width and your section content in the same line.

    Login or Signup to reply.
  2. #services{
    display:flex;
    justify-content:space-around;
    margin:0 auto;
    }
    
    h2{
    text-align:center;
    }
    
    .service{
    border:solid 1px green;
    width:250px;
    text-align:center;
    }
    <h2>Our Services</h2>
    
    <section id="services">  
    
            <div class="service">
              <img
                src="https://placeholder.com/200x100"
                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="https://placeholder.com/200x100" 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="https://placeholder.com/200x100"
                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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search