I'm trying to make this horizontal scroll window centered. However, it cannot do that because inside of it, it is showing everything being stretched. Currently doing this in react with simple HTML and CSS properties. Would like to know if there is a way to make everything fit on the left side while still allowing the scroll feature while having it centered.

    .scrollmenu {
  background-color: rgb(236, 235, 235);
  overflow: auto;
  white-space: nowrap;
  margin-top: 60px;
  margin-left: 10%;
  text-align: center;
  width: 1200px;
  
}

div.scrollmenu .scroll_info {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  
}

.scrollmenu .scroll_info{
  margin-top: 40px;
  margin-bottom: 15px;
  margin-left: 40px;
  margin-right: 20px;
  border-radius: 15px;
  padding-left: 20px;
  padding-right: 10px;
  cursor: pointer;
}

.scrollmenu .row{
  display: flex;
    background-color: rgb(44, 82, 138);
    margin-bottom: 30px;
    margin-left: 1px;
    margin-right: 8px;
    border-radius: 30px;
    padding-right: 5px;
    overflow: auto;
    width: 50px;
}
.scrollmenu .scroll_info .row .click_to_view1{
  width: 50%;
}
.scrollmenu .row .click_to_view1 .column1{
  padding-left: 30px;
}
.scrollmenu .row .click_to_view1 .data_text{
  color: rgb(213,222,238);
  font-weight: 500;
  
}

.scrollmenu .row .click_to_view2 {
  flex: 50%;
  margin-left: 40px;
}

.scrollmenu .row .click_to_view2 .column2{
  padding-left: 50px;
  padding-right: 50px;
  margin-top: 35px;
}

.scrollmenu .row .click_to_view2 .column2 .image{
    height: 150px;
    width: 250px;
    border-radius: 30px;
    margin-left: 55px;
}

.article_info .views{
  font-weight:560;
  margin-top: 50px;

}

.article_info .title{
  font-weight: 900;
  font-size: x-large;
}

.article_info .sub-title{
  color: rgb(78, 77, 77);
}

.article_info .body{
  font-weight: 450;
  margin-left: 90px;
  margin-right: 90px;
  padding-top: 35px;
}

.top{
  margin-top: 35px;
  color: rgb(79, 77, 77);
}


.btn{
    background-color: white;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
      margin-top: 10px;
      padding-left: 50px;
      padding-right: 50px;
      border-radius: 20px;
      margin-bottom: 25px;
      text-decoration: none;
}
.btnImg{
  height: 20%;
  width: 30%;
}
    class Slider extends React.Component {
    render() {
        return (
            <div className="scrollmenu">
                {/* <div > */}
                <div className="scroll_info" >
                    <div className="row" {...this.props}>
                        <div className="click_to_view1">
                            <div className="column1">
                                <h2 className="data_text">Kyrie Irving can still technically be traded,but all signs point to
                                </h2>
                                <h2 className="data_text">
                                    him playing for Nets next season.
                                </h2>
                                <h3 className="data_text">Basketball</h3>
                                <h3 className="data_text">2022-6-19</h3>
                                <h3 className="data_text">Tom</h3>
                            </div>
                        </div>
                        <div className="click_to_view2">
                            <div className="column2">
                                <img
                                    className="image"
                                    alt="Article "
                                    src={require("./HomePage_Images/Article_Img.png")}
                                ></img>
                            </div>
                        </div>
                    </div>
                </div>
                {/* <a className="scroll_info" href="#home"> */}
                <div className="scroll_info">
                    <div className="row" {...this.props}>
                        <div className="click_to_view1">

                            <div className="column1">
                                <h2 className="data_text">More reporting points to Harden opting out to
                                </h2>
                                <h2 className="data_text">
                                    give Sixers flexibility.
                                </h2>
                                <h3 className="data_text">Basketball</h3>
                                <h3 className="data_text">2022-6-15</h3>
                                <h3 className="data_text">Bob</h3>
                            </div>
                        </div>
                        <div className="click_to_view2">
                            <div className="column2">
                                <img
                                    className="image"
                                    alt="Article "
                                    src={require("./HomePage_Images/Harden.png")}
                                ></img>
                            </div>
                        </div>
                    </div>
                </div>
                {/* </a> */}
            </div>
            // </div>
        );
    }
}

CodePudding user response：

Instead of giving it a fixed width, try calculating the width with respect to the size of the screen. something like this:

.scrollmenu {
    width: calc(100vw - 10%);
    margin: auto;
    margin-top: 60px;
    overflow: auto;
    background-color: rgb(236, 235, 235);
    white-space: nowrap;
    text-align: center;
}

CodePudding user response：

.scrollmenu {
    width: calc(100vw - 10%);
    justify-content:center;
    margin-top: 60px;
    text-align: center;
}