When I use Bootstrap, my first section background has changed - html

Question

I've been coding for a while. then use Bootstrap later make me see the problem by only my first section(home) background turns white but in html background-color is black. Maybe I've used Bootstrap before, it's causing the error.enter image description here
html {
background-color: #222831;
font-size: calc(60% + 0.8vmin);
width: 100%;
height: 100%;
height: 1000px;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
.home {
display: relative;
max-width: 1000px;
min-height: 100vh;
margin-top: calc(6rem + 2rem);
margin-left: auto;
margin-right: auto;
padding: 4rem 2rem;
text-align: center;
}
.home-container {
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.home-container .media {
display: flex;
flex-direction: column;
row-gap: 1rem;
}
.home-container .media a {
font-size: 1.5rem;
}
.home-container .media a :hover {
color: #ff6768;
}
.home-container .me {
margin: 0 10px;
}
.home-container .me h2 {
font-size: 3rem;
color: #FD7013;
font-weight: 600px;;
}
.home-container .me h3 {
font-size: 1.5rem;
color: #F3AA29;
font-weight: 600px;;
}
.home-container .me p {
max-width: 380px;
font-size: 2rem;
color: #EEEEEE;
font-weight: 500px;
}
.home a {
font-size: 1.5rem;
}
.home .scroll-down i{
color: #ff6768;
font-size: 1.5rem;
margin-top: 30px;
animation: scroll-down 2s ease infinite;
}
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<section class="home" id="home">
<div class="home-container">
<div class="media">
<a href="https://www.facebook.com/webbalaka/" target="_blank"
><i class="fa-brands fa-facebook-f"></i
></a>
<a href="https://www.instagram.com/web.wafu/" target="_blank"
><i class="fa-brands fa-instagram"></i
></a>
<i class="fa-brands fa-twitter"></i>
</div>
<div class="me">
<h2>Pasit Khumsena</h2>
<h3>SCiUS Student</h3>
<p>"Don't worry about what you can't control"</p>
</div>
<div class="pic-me">
<!-- <img src="/AnotherPort/img/IOIOIOIO.JPG" alt="" /> -->
<div style="background-color: red; width: 350px; height: 400px"></div>
</div>
</div>
<a href="#about" class="scroll-down"
>Scroll Down <i class="fa-solid fa-angles-down"></i
></a>
</section>
or perhaps caused by nav-bar high over section.
.nav-bar {
position: relative;
height: calc(4rem + 1rem);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
padding: 0 1.25rem;
transition: 0.5s ;
}
.nav-item {
justify-content: space-around;
display: flex;
column-gap: 2rem;
}
.nav-bar h1{
font-size: 3em;
color: #ff6768;
}
.nav-item a {
font-size: 1.2em;
font-weight: 500px;
color: #EEEEEE;
}
.nav-item a:hover {
color: #F3AA29;
}
.pic-me img{
max-height: 500px;
border-radius: 12px;
}
<header>
<div class="nav-bar">
<div class="Portfolio">
<h1>Portfolio</h1>
</div>
<div class="nav-item">
Home
About
Education
Skill
Contact
</div>
</div>
</header>