How to make a div out of the screen but only slide that element?

Question

I am carrying out a project in react for a web page. I am performing as a category bar where in the mobile version I should leave the screen but I want only the component to slide just and not the whole page.

Here is the design of how it should look

But currently it looks this way

Here is how it looks today

On the other hand, when you select something from this category, it is placed on the left side and removed from the category list, which would be that it is selected

Like this

The code of this component is here:

import './styles/Category.css'

import { cate } from '../assets/category_list.json'

class Category extends Component {
  constructor(){
    super();
    this.state = {
        cate,
        selectItem: undefined,
        opcion: 0
    };

    this.handaleSelect = this.handaleSelect.bind(this);
  }

  handaleSelect = (e,index) => {
    this.setState({
      selectItem: index,
      opcion: 1
    })
    // console.log(index)
    // console.log(this.state.selectItem)
  }

  handaleUnSelect = (e) => {
    this.setState({
      selectItem: undefined,
      opcion: 0
    })
  }

  selected() {

    const select_pers = this.state.cate.filter(cate => {return cate.number === this.state.selectItem})

    if (this.state.opcion === 1) {
      return (<div className="box1 justify-content-center">  
                <div>
                  <img className="picture rounded-circle red-shadow" alt={select_pers.alt}src={require("../assets/img/"+select_pers[0].path_image)}></img>
                </div>                
                  <div className="text-box red-box" onClick={(e) => this.handaleUnSelect(e)}>
                    <p>{select_pers[0].title}</p>
                  </div>                
              </div> )
    }
  }

  render(){

    var catego = undefined;
    var size = {
      width: '808px',
    };

    if(this.state.opcion !== 0){
      catego = this.state.cate.filter((cate) => {
        return cate.number !== this.state.selectItem
      });
      size = {
        width: '748px',
        left: '31%',
      };
    }else{
      catego = this.state.cate;
    }

    return (
      <div className="d-flex justify-content-center ">
          { this.selected()}
          <div className="Category" style={size}>
              <div className="container boxe">
                <div className="row">
                  { catego.map(e => 
                  <div className="col" key={e.number}>  
                    <div>
                      <img className="picture rounded-circle" alt={e.alt} src={require("../assets/img/"+e.path_image)}></img>
                    </div>
                      <div className="text-box" onClick={(x) => this.handaleSelect(x,e.number)}>
                        <p>{e.title}</p>
                      </div>
                  </div>
                  )}

                </div>
              </div>
          </div>  
      </div>
    );
  }
}
export default Category;``` 

And the css file

    .Category {
    /* position: absolute; */
    width: 858px;
    height: 171px;
    background: #ECF0F6;
    border-radius: 200px;
    /* left: 28%; */
    margin-top: 5px;
  }

.boxe {
    /* background-color: green; */
    text-align: center;
    width: 95%;
    height: 80%;
    margin: 20px 20px 20px 20px;
    /* padding-top: 18px; */
  }
.box1{
  /* position: absolute; */
  /* background-color: yellow; */
  /* left: 22%; */
  margin-top: 28px;
  text-align: center;
  width: 130px;
  float: left;
}

.justify-content-center{
  padding-right: 10px;
}


.picture{
    width: 80px;
    height: 80px;
    opacity: 0.8;

  }

  .text-box{
    background: #FFFFFF;
    height: 48px;
    border: 1px solid #ECF0F6;
    /* box-sizing: border-box; */
    box-shadow: 0px 7px 64px rgba(0, 0, 0, 0.07);
    border-radius: 800px;
    margin-top: 6px;
    /* width: 105px; */
    cursor: pointer;
  }

  .text-box p{

    font-family: Quicksand;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    color: #78869A;
    padding-top: 12px;
    cursor: pointer;
    height: 48px;
  }

  .text-box p:hover{
   color: #FF8B85;
  }

.red-box{
  background: #FF8B85;
}

.red-box p:hover{
  color: gainsboro;
}

.red-box p{
  color: white;
}

.red-shadow{
  box-shadow: 0px 2px 10px #FF7575;
} 

Answer 1

A working code snippet would be even more helpful.

Probably you could apply "display: flexbox" to the following element, instead of "float: left" to its children.

<div className="d-flex justify-content-center ">

Then you can play around with "flex-wrap" and "overflow" to achieve your design.