Пробел отображается при прокрутке вправо в реакции

Question

Мой проект Reactjs показывает пробелы, когда экран не в полном размере, и прокрутите вправо.Когда я изменяю размер окна до размера, меньшего, чем полный размер, все кажется нормальным, то есть до тех пор, пока я не прокручиваю вправо, в правой части экрана появляется пробел.Если кто-нибудь что-нибудь знает, пожалуйста, дайте мне знать.Поиск этого ответа в Интернете.Пожалуйста, смотрите мой код и рисунок ниже.

Я пытался изменить ширину и высоту родительского контейнера на 100%, высоту: 100vh, ширину: 100vw и т. Д.

[![//Home.js

import React from "react";
import NavBar from "./NavBar";
import Footer from "./Footer"
import Collapsible from "react-collapsible";

const Home = () => {


    return(
        <div>
        <div className="homebackground">
        <NavBar/>
        <div className="homeContent">
            <div className="homeItems">
            <h1 className="sectionTitle">MusicFlo Lyric Search</h1>
            <span className="sectionText">
                Ever had a song running through your head, but you don’t know who sings it or what it’s called? LyricFind’s Lyric Search helps answer the age-old question of “What IS the name of that song?”.
                By searching the actual lyrics, not only can you “Name That Tune,” but you can create playlists based on lyrics and subjects of songs. Imagine making a playlist of songs about San Francisco by simply searching the lyrics for “San Francisco”, “Frisco”, or other relative keywords. If your users can’t search based on the lyrics, they’re missing a key way to interact with your content and service!
                Pricing for LyricFind’s Lyric Search services is available on a per-display, per user, per month, or revenue share model. We can also customize a solution to fit your unique business needs. LyricFind can deliver lyric search results via XML, JSON API or data feed, allowing maximum flexibility for your implementation.
            </span>
            <img src="https://lyricfind.com/bing-internet.png"/>
            <h2 className="subheading">With just one click or press away from enjoying fast and accurate lyrics to your favorite songs</h2>
            <img className="phoneImage" src="https://spotifysupport.freetls.fastly.net/article-gallery/articles2/iphone/iphone_genius.png"/>
            <div className="banner">
                <h2 className="subheadingplayer">Enjoy your lyrics on the go</h2>
                <img src="https://media.giphy.com/media/2ce7MFH4E6UaTCyj79/giphy.gif"/>
            </div>
            </div>

        <div className="cardList">
        <h4 className="cardListHeader">Used by a variety of companies</h4>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="https://cdn.vox-cdn.com/thumbor/QUUkN7Wwu7tcS175T6xgxbFV4mw=/81x0:779x465/1200x800/filters:focal(81x0:779x465)/cdn.vox-cdn.com/uploads/chorus_image/image/47116110/Screen_Shot_2014-12-01_at_10.55.10_AM.0.0.png" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Pandora Radio is a music streaming and automated music recommendation internet radio service powered by the Music Genome Project. The service, operated by Sirius XM Satellite Radio, is available in the United States. The service plays songs that have similar musical traits. </p>
                </div>
            </div>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="https://smhttp-ssl-73418.nexcesscdn.net/tech/en/wp-content/uploads/sites/2/2018/10/spotify.jpg" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Spotify is a Swedish audio streaming platform that provides DRM-protected music and podcasts from record labels and media companies.</p>
                </div>
            </div>
            <div class="card cardProps" style={{width:"20vw"}}>
                <img src="http://tizonia.org/img/google-play-music-logo.png" class="card-img-top" alt=""/>
                <div class="card-body">
                    <p class="card-text">Google Play Music is a music and podcast streaming service and online music locker operated by Google. The service was announced on May 10, 2011, and after a six-month, invitation-only beta period, it was publicly launched on November 16, 2011.</p>
                </div>
            </div>
            <img className="pikasticker" src="https://media.giphy.com/media/31vamYdZV5ISQ/giphy.gif"/>
            <h2 className="subheadingpikachu">Even Pikachu can't resist!</h2>
        </div>
        </div>
        <div className="jumbotron jumbo faq">
            <h1>MusicFlo FAQ</h1>
            <Collapsible className="btn btn-success btn-lg" trigger="Start here">
                <h2>This is the collapsible content. It can be any element or React component you like.</h2>
                <p>It can even be another Collapsible component. Check out the next section!</p>
            </Collapsible>
        </div>
        <div className="downloadandsave">
            <h3>Download and save lyrics for ease of access where internet is unavailable</h3>
            <img className="downloadIcon" src="http://simpleicon.com/wp-content/uploads/cloud-download-2.png"/>
            <span className="plus">+</span>
            <img  className="saveIcon" src="http://www.pngmart.com/files/7/Save-PNG-Transparent-Image.png"/>
        </div>
        <div className="getStartedButton">
            <button className="btn btn-primary btn-lg">Get Started Today For Free</button>
        </div>
        <Footer/>
        </div>
        </div>
    );
}

export default Home;






//App.css



.homeContent {
  width: 50%;
  display: flex;
  flex-direction: row;
  margin-left: 10%
}

.cardProps {
  margin-bottom: 20px;
  margin-top: 20px
}


.cardList {
 margin-left: 15vw;

}

.container {
  background-image: url("https://research.fb.com/wp-content/uploads/2018/05/music-hero2.jpg");
  background-repeat: no-repeat;

}

.cardListHeader {
  margin-top: 60px
}

.navBarLogo {
  width:5vw;
  height: 5vh;
  border-radius: 50%
}


.navBarGroup {
  display: flex;
  flex-direction: row;
}

.homebackground {
  background-color: antiquewhite;
  height:100%;
  width:100%
}

.subheading {
  font-style: italic;

}

.phoneImage {
  margin-left: 120px;
  margin-top: 50px
}

.banner {
  display: flex;
  flex-direction: row
}


.subheadingplayer {
  font-style: italic;
  margin-top: 160px
}

.subheadingpikachu {
  font-style: italic;
  margin-top: 10px
}

.pikasticker {
  height:250px;
  width:250px;
  margin-top: 130px
}

.getStartedButton {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
  margin-bottom: 200px;
}

.footercontainer {
  background-color: black;
  height:40vh;
  width:100vw

}

.footertext {
  color:white
}

.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jumbo {
  background-image: url("https://ak9.picdn.net/shutterstock/videos/14887459/thumb/4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color:antiquewhite;

}

.downloadIcon {
  width: 20vw;
  height:30vh
}

.saveIcon {
  width: 20vw;
  height:20vh
}

.plus {
  font-weight: bold;
  font-size: 5vw
}

.downloadandsave {
  display:flex;
  flex-direction: row
}

.downloadandsavesubheading {
  font-style: italic;
  width: 30vw;
  margin-left: 30px;
  margin-top: 70px
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }][1]][1]

Ожидаетсярезультаты: чтобы не было пробелов справа на окнах меньшего размера после прокрутки вправо.

Фактические результаты: пробелы справа на окнах меньшего размера после прокрутки вправо