Your issue arises from a lack of setting a maximum width for high-resolution screens.
In order to address this, I have included the following code snippet that establishes a max-width: 768px;
for your content, which is customizable according to your needs.
Additionally, for the bottom footer, consider utilizing the entirety of the body
as a flexbox and applying margin-top: auto;
specifically on .bottom
.
/*Transform the entire body into a column flexbox*/
body {
margin: 0 auto;
display: flex;
flex-direction: column;
}
.menu {
cursor: pointer;
}
.mario {
display: block;
margin-left: auto;
margin-right: auto;
}
.topContent {
background-color: red;
height: 100px;
width: 70%;
margin: auto;
justify-content: center;
align-items: center;
display: flex;
}
.mainContent {
height: 100%;
width: 100%;
margin: 0 auto 50px;
justify-content: center;
align-items: center;
display: flex;
flex-wrap: wrap;
max-width: 768px; /*Prevent content from stretching too far*/
}
.left {
width: 15%;
}
.right {
width: 15%;
}
.center {
width: 70%;
background-color: antiquewhite;
}
.bottom {
background-color: red;
width: 100%;
height: 100px;
margin-top: auto; /*Affix the footer to the bottom*/
}
body {
background-color: saddlebrown;
}
.mariogif {
float: right;
width: 200px;
margin: auto 20px auto 10px;
}
<div class="mainContent">
<div class="left"></div>
<div class="center">
<p class="aboutp1">Super Mario is a 2D and 3D platform game series created by Nintendo based on and starring the fictional plumber Mario. Alternatively called the Super Mario Bros series or simply the Mario series, it is the central series of the greater Mario franchise.
At least one Super Mario game has been released for every major Nintendo video game console. There are over twenty games in the series.
</p>
<p class="aboutp2">
The Super Mario games are set primarily in the fictional Mushroom Kingdom, typically with Mario as the player character. He is usually joined by his brother, Luigi, and often by other members of the Mario cast. As platform games, they involve the player
character running and jumping across platforms and atop enemies in themed levels. The games have simple plots, typically with Mario and Luigi rescuing the kidnapped Princess Peach from the primary antagonist, Bowser. The first game in the series,
Super Mario Bros., released for the Nintendo Entertainment System (NES) in 1985, established the series' core gameplay concepts and elements. These include a multitude of power-ups and items that give the character special powers such as fireball-throwing
and size-changing.
</p>
<img src="../resources/mario-super.gif" alt="Mario Gif" class="mariogif">
</div>
<div class="right"><img src="../resources/mario.png" alt="Mario Image" class="mario"></div>
</div>
<div class="bottom">
</div>