Currently, I am attempting to implement a carousel using react-bootstrap within my react application. The goal is to have a black background container where the carousel will reside, similar to this illustration
Desired Container
However, upon creating the black background div, an unexpected horizontal scroll bar appears at the bottom as depicted here
Issue at Hand
I am uncertain as to where this horizontal scroll bar is originating from. Below, you will find the JS component code and its corresponding CSS.
import React from 'react'
import './SlideShow.css'
const SlideShow = () => {
return(
<div className='slide-container'></div>
)
}
export default SlideShow
CSS:
.slide-container{
width: 100vw;
height: 50vh;
background: #050505;
overflow: hidden;
}
Your assistance with resolving this matter is greatly appreciated. Thank you in advance.