I am in the process of creating a website using react-bootstrap. However, I have encountered an issue where there is excessive white space on the right side of the website. It seems that the default width of my website has expanded unintentionally. Currently, my website consists of 5 main components:
- Header
- About
- Gallery
- Destination
- Footer
Even after deleting all the CSS code, the white space persists. The only time the white space disappears is when I remove all components except for the Header. Does anyone have a solution for this issue?
<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>
To set the default HTML styling, I have included the following CSS:
html,body{
margin:0;
padding:0;
font-weight: 400;
font-family: Montserrat, "Open Sans", Helvetica, Arial, sans-serif;
}