Css bootstrap grid not working as intended

1

Hello everyone, I am having an issue with mapping my divs on the bootstrap grid.

1
11773×855 111 KB

No matter what I do I can’t get the grid to be horizontal on my page. It always leaves that massive blank space on the right.
If they were all separate divs this would be easy, but I am having them mapped from an array like so:

  {
      return (
          
              <div className="col-sm-12  " key={serviceitems.title}>
                <h5 className="" >{serviceitems.title}</h5>
                <img src={serviceitems.image} alt={serviceitems.title}  className="img-fluid serviceitemimg"></img>
           <div className="">
                
                <p id={serviceitems.description} className=" " >{serviceitems.description}</p>
                <p  className="">${serviceitems.price}</p>
                <p id ={serviceitems.amount} className=" ">Duration:{serviceitems.amount} week(s)</p>
                <button name={serviceitems.title} id= {serviceitems.image} value={serviceitems.price} className="button servicebutton" >Add to cart</button>
                <Collapsible trigger={<p className="">Read more</p>}>{serviceitems.fulldescription} </Collapsible>
               </div>
                
              </div>
           
      );
    });
  } else return <h1>Loading...</h1>;

    return (
    
    <div>
    <h1 className="servicestitle">Some services I offer</h1> 
     
      
   {serviceitems}
        
      </div>
    );
  }
}

So far I have tried every css rule I can think of, how would you get them to be horizontal?
Thank you in advance for your help.
Full code: