I have created three different sections, and I want each of them to span the entire width of the screen. I was able to achieve this using the width property, but I am unsure how to make the height 100% of the screen. Additionally, I would like these sections to scroll horizontally instead of vertically as is typical. Is there a way to modify my code to achieve this?
Please refer to the snippet below:
body {
margin: 0;
padding: 0;
}
.element {
width: 100%;
background-color: #333;
height: 100px;
margin: 0;
padding: 0;
}
.element2 {
width: 100%;
background-color: #000;
height: 100px;
margin: 0;
padding: 0;
}
.element3 {
width: 100%;
background-color: #111;
height: 100px;
margin: 0;
padding: 0;
}
.element p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: #ffffff;
position: absolute;
}
.element2 p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: #ffffff;
position: absolute;
}
.element3 p {
padding: 0;
font-family: "Bebas Neue";
font-size: 50px;
color: yellow;
position: absolute;
}<div class="element">
<p>Element #1</p>
</div>
<div class="element2">
<p>Element #2</p>
</div>
<div class="element3">
<p>Element #3</p>
</div>