I'm facing a few challenges that I need help with:
The issue with the .panel class is puzzling. Although my CSS should affect the entire panel, it's not centered on the screen despite some styling applying correctly (line 153, 235).
When I change the class name of the section in HTML and then update it in the CSS, the styles no longer work as intended (line 235).
My priority right now is to make the website responsive and ensure the panel is perfectly centered. Currently, scrolling sideways is needed to view the whole page. Any quick tips on sizing would be greatly appreciated.
/* * {
} */
#title1 {
color: #ffffff;
text-align: center;
font-weight: 700;
font-style: oblique;
text-decoration: #D8E2DC;
font-size: 40px;
display: flex;
position: relative;
bottom: 50px;
left: 100px;
font-family: 'Abril Fatface', cursive;
}
#title2 {
color: black;
text-align: center;
font-weight: 700;
font-style: oblique;
text-decoration: #000000;
font-size: 80px;
display: flex;
...
</section>
<section id=flexpractice>
<div style="background-color: #80ffdb"></div>
<div style="background-color: #64dfdf"></div>
<div style="background-color: #48bfe3"></div>
<div style="background-color: #5390d9"></div>
<div style="background-color: #6930c3"></div>
</section>
</main>
</body>
</html>