As an IT student, I have been diligently working on creating a website for my assignment. However, I am facing an issue with the background not adjusting properly based on the content placed within it. While one page includes all the sub-divs as intended, another page does not.
.mainContent {
font-family: "Arial", Helvetica, sans-serif;
font-size: 2em;
background-color: lightgrey;
padding: 30px 30px;
height: auto;
}<div class="mainContent">
<h1>Featured Artist - Monarchy</h1>
<h4 class="fontChange">Artist Biography:</h4>
<p class="fontChange">
Monarchy are a British rock band made up of Fred Venus, Bryan June,
Roger Cobbler and Jon Vicars. They formed in Preston in 1970 after
Bryan & Roger left their previous band 'Cheesy Grin'. They achieved
moderate chart success and have played to large stadiums such as
the Globe Arena, Deepdale Stadium & Gigg Lane. Their first album
'Monarchy' reached a high point of 164 in the album charts in 1974,
while their 1075 album 'Night at the Guilhall' brought them international
success and was the top selling album that year in Liechtenstein.
That album featured the single 'Slavic Symphony', which stayed at
number one in the UK for nine seconds.
</p>
<h5 class="fontChange">
Albums
</h5>
<div id="albumOne">
<img class="imgBorder" src="Assets/Images/monarchy-album.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
<div id="albumTwo">
<img class="imgBorder" src="Assets/Images/monarchy-DE.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
<div id="albumThree">
<img class="imgBorder" src="Assets/Images/monarchy-ES.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
<div id="albumFour">
<img class="imgBorder" src="Assets/Images/monarchy-ludo.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
<div id="albumFive">
<img class="imgBorder" src="Assets/Images/monarchy-album.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
<div id="albumSix">
<img class="imgBorder" src="Assets/Images/monarchy-DE.jpg">
</img>
<span class="caption">Text below the image</span>
</div>
</div>The grey background should encompass the following divs.
I apologize for the imperfect formatting in this post as it's my first attempt.
An example where it works on the first page is shown above
An example where it doesn't work on the second page is also seen here