I've been struggling to tweak the background color of a specific page. I attempted setting the HTML as the background color, using !important, but unfortunately, it didn't yield the desired result. The same goes for trying to set the background color of *.
The issue mainly lies at the bottom of the page, which requires fixing. My assumption is that this problem surfaced due to me adding a margin-bottom to the last container, although it's necessary. Appreciate any assistance in resolving this!
Furthermore, it seems like I'm encountering a similar challenge on other pages too.
https://i.stack.imgur.com/XLF1t.png
.bods {
background-color: #555B6E !important;
font-family: orpheuspro, serif;
font-style: normal;
}
.container-1 {
border-radius: 20px;
background-color: #50354d!important;
max-width: 700px;
min-height: 500px;
margin-bottom: 30px;
margin-top: auto;
margin-left: auto;
margin-right: auto;
padding: 120px 75px 0px 50px;
}
.container-2 {
border-radius: 20px;
background-color: #50354d!important;
max-width: 700px;
min-height: 500px;
margin-top: 132px;
margin-left: auto;
margin-right: auto;
padding: 120px 75px 0px 50px;
}
.container-3 {
border-radius: 20px;
background-color: #50354d!important;
max-width: 700px;
min-height: 500px;
margin-top: 132px;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
padding: 120px 75px 0px 50px;
}
.paragraph-1 {
margin-top: 40px;
margin-bottom: 0px;
color: whitesmoke;
text-align: center;
}
.heading {
text-transform: uppercase;
margin-top: 100px;
text-align: center;
color: whitesmoke;
}
.paragraph-2 {
margin-top: 40px;
color: whitesmoke;
text-align: center;
}
.paragraph-3 {
margin-top: 40px;
color: whitesmoke;
text-align: center;
}
<html>
<body class="bods">
<br>
<br>
<br>
<div class="card-body shadow p-3 mb-5 rounded">
<h1 class="heading">
Heading 1
</h1>
<p class="paragraph-1">Text 1</p>
</div>
<div class="card-body shadow p-3 mb-5 rounded">
<h1 class="heading">
Heading 2
</h1>
<p class="paragraph-2">Text 2</p>
</div>
<div class="card-body shadow p-3 mb-5 rounded">
<h1 class="heading">
Heading 3
</h1>
<p class="paragraph-3">Text 3</p>
</div>
</body>
</html>