Made my footer to my website, but when I zoom into the page, the whole thing becomes overlapped - html

Question

I'm new to html and css, but I'm trying to teach myself how to make a decent looking website. I've gotten to the footer portion of the website and I thought I created well since it looked as I wanted, but when I zoomed into the page, the elements in the footer all began overlapping with one another. Could someone help me out by showing me how to fix this issue. Any help is appreciated.
My current footer:
.footer {
background: #323132;
text-transform: uppercase;
width: 100%;
height: 350px;
color: white;
}
.footer a {
text-decoration: none;
color: #a2a4a7;
font-family: Arial,sans-serif;
font-size: 14px;
}
.vertical-right-1 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 20%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-2 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 45%;
box-shadow: 0.2px 0.2px;
}
.vertical-right-3 {
border-right: 2px solid black;
height: 200px;
position: absolute;
margin: 15px 0;
left: 70%;
box-shadow: 0.2px 0.2px;
}
<div class="footer">
<div style="float: left; margin: 0 auto; padding: 10px 0 0 40px;">
<p><strong>Find a Store</strong></p>
<p><strong>Sign Up For Email</strong></p>
<p><strong>Become A Member</strong></p>
<p><strong>Site Feedback</strong></p>
</div>
<div class="vertical-right-1">
</div>
<div style="float:right; margin: 0 auto; width: 300px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;">Need To Talk?</p>
<p>Order Status</p>
<p>Shipping and Delivery</p>
<p>Returns</p>
<p>Payment Options</p>
<p>Contact Us</p>
</div>
<div class="vertical-right-2">
</div>
<div style="float:right; margin: 0 auto; width: 330px;">
<p style="font-family: 'Cabin Condensed', sans-serif;font-size: 20px;"><strong>Sports</strong></p>
<p>Soccer</p>
<p>Basketball</p>
<p>NFL</p>
<p>Tennis</p>
</div>
<div class="vertical-right-3">
</div>
<div style="margin:0 auto; width:630px; padding:4px 0 0 0;">
<strong>
<p style="font-family: 'Cabin Condensed', sans-serif; font-size: 20px;">About The League</p>
</strong>
<p>News</p>
<p>Careers</p>
<p>Investors</p>
<p>Sustainability</p>
</div>
<div style="margin: 30px; color: white;"><br>
<hr>
</hr>
</div>
<a href="#"><i class="fa fa-facebook"
style="padding: 25px;font-size: 30px; width: 80px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<!-- <a href="#"><i class="fa fa-twitter"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a>
<a href="#"><i class="fa fa-instagram"
style="padding: 2px;font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%;"></i></a> -->
</div>
As you can see, the lines are all overlapped, and it looks just wrong. If you view it in full screen mode it looks as it should.
Hope someone can lend a hand!

Answer 1

You're going to want to set up some breakpoints which will allow you to alter CSS for different screen sizes.
Also, I wouldn't use absolute and left to position elements on a page, unless in particular circumstances. What you want to do instead is use grid or flexbox, it will make life much easier in the future.