этот код должен постоянно сохранять текст lorem ipsum в центре, но вместо этого, когда я достигаю большой точки останова, он перекрывает изображение. Пожалуйста, объясните, почему это происходит и как это исправить. здесь приведен код (прошу прощения за тот факт, что фон белый, что переполнение стека ведет к повышению):
body {
background-color: pink;
font-family: "Nunito", sans-serif;
}
#mainNav {
font-size: 1.5rem;
font-weight: 100;
}
#mainNav #navLinks {
color:white;
}
#mainNav #navLinks:hover {
color:#EA1C2C;
}
#mainNav .navbar-brand{
color:#EA1C2C;
}
#MoC span {
color:#EA1C2C
}
#MoC h1 {
font-weight: 100;
font-size: 4rem;
}
@media(max-width: 1200px) {
#MoC h1{
font-size: 3rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="candy.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,300,400,700&display=swap" rel="stylesheet">
<title>Museum of Candy</title>
</head>
<body>
<script src="https://kit.fontawesome.com/8d084e6dec.js" crossorigin="anonymous"></script>
<nav id="mainNav" class="navbar navbar-dark navbar-expand-md py-0 fixed-top">
<a href="#" class="navbar-brand">CANDY</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navLinks" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link" id="navLinks">HOME</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" id="navLinks">ABOUT</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link" id="navLinks">TICKETS</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-lg-6">
<div id="MoC" class="text-white text-center d-none d-lg-block mt-5">
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
<h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
</div> <!-- MoC collapse -->
</div> <!-- column collapse -->
<div class="col-lg-6">
<img class="img-fluid" src="https://images.unsplash.com/photo-1534073737927-85f1ebff1f5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="gloved hand holding a donut">
</div>
</div> <!-- row collapse -->
</div> <!-- container collapse -->
<div class="container-fluid px-0">
<div class="row align-items-center">
<div class="col-md-6 img-fluid">
<img src="https://images.unsplash.com/photo-1525059337994-6f2a1311b4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=654&q=80" alt="">
</div>
<div class="col-md-6 text-center">
<i class="fas fa-candy-cane"></i>
<h2>MUSEUM OF CANDY</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor odio, inventore vitae debitis sint hic ut consectetur quia, ex quo, sit in quam voluptas ab tenetur? Architecto exercitationem qui cupiditate, dignissimos voluptatum, nesciunt adipisci animi minima odio deserunt ullam atque aperiam repudiandae, distinctio omnis necessitatibus aut pariatur suscipit maiores fugiat dolore magni praesentium. Sit illo, amet, dolore repellendus magnam quisquam, maxime voluptates non incidunt repudiandae autem fugiat minima quod. Vero!</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>