Hello there and thanks in advance. I've recently delved into the world of HTML and CSS and I'm currently in the process of building my own website. I've encountered an issue with a div container where I'm utilizing Bootstrap elements. The problem arises when I resize the screen to the smallest option, causing the text to overflow off the left side of the screen, and I'm struggling to find a solution for this.
Below is a snippet of my code:
h1 {
position: relative;
top: 3.125rem;
right: 6.8rem;
font-weight: 300;
font-size: 3.5rem;
line-height: 1.5;
color: white;
letter-spacing: 2px;
padding-bottom: 4rem;
}
#firstsection {
background-color: #FF5D5D;
padding-bottom: 1rem;
height: auto;
margin-left: auto;
margin-right: auto;
}
.img1 {
transform: rotate(20deg);
position: relative;
top: 25%;
left: 8px;
width: 17rem;
z-index: 0;
}
.container-fluid {
padding: 3% 10%;
}
.btnposition {
position: relative;
top: 1rem;
right: 7rem;
bottom: 12.5rem;
}<section id="firstsection">
<div class="container-fluid container1">
<div class="row">
<div class="col-lg-6 text-and-button">
<h1>Meet your perfect skating partner</h1>
<button type="button" class=" btn btn-primary btn-lg bg-dark btnposition btn-apple ">
<i class="fa-brands fa-apple"></i> Download</button>
<button type="button" class="btn btn-outline-light btn-lg btnposition"><i class="fab
`enter code here`fa-google-play">
</i> Download</button>
</div>
<div class="col-lg-6 pa-5">
<img class="img1" src="iphone6skate.png" alt="iphoneimg">
</div>
</div>
</div>
</div>
</section>