无法删除我网站上的多余空白

Question

我正在尝试使用 react-bootstrap 制作网站，但我不知道为什么我的网站右侧有额外的空白，似乎我的网站默认已扩展。我的网站上有 5 个组件

1. 标题
2. 关于
3. 图库
4. 目的地
5. 页脚

即使我删除所有 CSS，空白也不会消失。只有当我删除除 Header 之外的所有其他组件时，空格才会消失

有什么办法吗？

    <div>
      <Header/>

      <Row className="aboutus regular">
        <Col className="aboutusleft" md="12" lg ="6" >
            <h1 className="semibold"> About Us</h1>
            <hr style={{width:'23%', margin:'0', border:'2px solid #10255A'}}></hr>

            <p>Diamond Hotel serves as an urban oasis for both discerning business and leisure travelers. Located in the heart of Samarinda and close to the most prominent culinary tourism object. The hotel itself possess a trendy design with attention to comfort, quality and value based accommodation. It features 75 modern rooms and suites with contemporary design environment to make you feel completely at home.</p>

            <button className="aboutbutton">Learn More</button>
        </Col>

        <Col className="aboutusright text-center" md="12" lg ="6">
          <img src="./img/Group4.png"></img>
        </Col>
      </Row>

      <Row className="gallery">
        <Col className="galleryleft" lg="5">
          <h1>Gallery</h1>
          <hr style={{width:'40%', margin:'0', border:'2px solid #967A50'}}></hr>

          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur</p>
        </Col>

        <Col className="galleryright" lg="7">
          <Carousel fade>
            <Carousel.Item interval={1000}>
              <img
                className="d-block w-100"
                src="#"
                alt="First slide"
              />
              <Carousel.Caption>
                <h3>First slide label</h3>
              </Carousel.Caption>
            </Carousel.Item>

            <Carousel.Item interval={1000}>
              <img
                className="d-block w-100"
                src="#"
                alt="Second slide"
              />

              <Carousel.Caption>
                <h3>Second slide label</h3>
              </Carousel.Caption>
            </Carousel.Item>

            <Carousel.Item interval={1000}>
              <img
                className="d-block w-100"
                src="#"
                alt="Third slide"
              />

              <Carousel.Caption>
                <h3>Third slide label</h3>
              </Carousel.Caption>
            </Carousel.Item>
          </Carousel>
        </Col>
      </Row>

      <Row className="services">
        <Col className="servicesleft" sm="12" md="12" lg="6">
          <h1>Services During <br/>Your Stay</h1>
          <hr style={{width:'36%', border:'2px solid #967A50'}}></hr>

          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
        </Col>

        <Col sm="12" md="12" lg="6">
          <Row className="text-center">
            <Col className="qualityside">
              <img src="./img/bed.png" alt="Bed_logo"></img>
              <h2>High quality bed</h2>

              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
            </Col>

            <Col className="qualityside">
              <img src="./img/concierge.png" alt="Concierge_logo"></img>
              <h2>Concierge Service</h2>

              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
            </Col>
          </Row>

          <Row className="text-center">
            <Col className="qualityside">
              <img src="./img/location.png" alt="Location_logo"></img>
              <h2>Downtown Area</h2>

              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
            </Col>

            <Col className="qualityside">
              <img src="./img/wifi.png" alt="Wifi_logo"></img>
              <h2>24/H Wifi Access</h2>

              <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
            </Col>
          </Row>

        </Col>
      </Row>
    
      <Footer />
    </div>

我的 CSS 将 HTML 设为默认值：

html,body{
    margin:0;
    padding:0;
    font-weight: 400;
    font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}

Answer 1

当“行”未包装在“容器”中时，我经常遇到引导问题。 要调试，请转到浏览器的检查器并逐段删除以查看导致问题的原因

Answer 2

使用这样的东西：

  html,body{
        margin:0;
        padding:0;
        font-weight: 400;
        font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    } 

       <Container>
         <Row>
           <Components ... />
         </Row>
       </Container>