I am having an issue with this code where the Lorem Ipsum text is not staying centered at all times. Instead, it overlaps the image when I reach the large breakpoint. Can you please explain why this is happening and suggest a solution? Here is the current code (please disregard the white background, that was due to Stack Overflow issues):
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>
...
...
...
...
...
.
</body>
</html>