# Css bootstrap grid not working as intended

**URL:** <https://forum.freecodecamp.org/t/css-bootstrap-grid-not-working-as-intended/379914>\
**Category:** General\
**Created:** [April 27, 2020, 6:36pm UTC](https://forum.freecodecamp.org/t/css-bootstrap-grid-not-working-as-intended/379914 "2020-04-27T18:36:40Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Imstupidpleasehelp](https://avatars.discourse-cdn.com/v4/letter/i/7ab992/32.png) [@Imstupidpleasehelp](https://forum.freecodecamp.org/u/Imstupidpleasehelp)\
**Post date:** [April 27, 2020, 6:36pm UTC](https://forum.freecodecamp.org/t/css-bootstrap-grid-not-working-as-intended/379914/1 "2020-04-27T18:36:40Z")

</div>

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

 ![1](https://global.discourse-cdn.com/freecodecamp/original/3X/7/9/7930b6d6040dc6ad887a066b9578133cd5b9c8ae.jpeg)  
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:

```auto
  {
      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:

> **[Imstupidpleasehelp/FitnessWebsite-](https://github.com/Imstupidpleasehelp/FitnessWebsite-)**
>
> Contribute to Imstupidpleasehelp/FitnessWebsite- development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:56pm UTC](https://forum.freecodecamp.org/t/css-bootstrap-grid-not-working-as-intended/379914/2 "2021-06-01T18:56:24Z")

</div>