I have a services section in this webpage. within this section I have 4 lists. Each ul is a flex-item and has a flex basis of 25%. When I shrink the page however the ul or div it sits in, is being pushed outside of the page? I do have a margin-left set on each ul. Any Ideas on what's causing this?
p.s the code posted is just so i can post this fiddle link
https://jsfiddle.net/hntsa1kd/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About | Kane Concrete & Construction</title>
<link rel="stylesheet" href="../css/about.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel|Asap|Krub|Oxygen|Rajdhani|Staatliches|Varela+Round" rel="stylesheet">
</head>
<body>
<header>
<div class="wrapper2">
<nav>
<div class="logo">
<i class="fab fa-accusoft"></i>
</div>
<div class="nav">
<div class="ham-menu">
<div class="m1" id="m1"></div>
<div class="m2" id="m2"></div>
<div class="m3" id="m3"></div>
</div>
<ul>
<li class="after"><a href="index.html">Home</a></li>
<li class="after"><a href="about.html">About</a></li>
<li class="after"><a href="#services">Services</a></li>
<li class="after"><a href="careers.html">Careers</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<h1>About Us</h1>
</div>
</header>
<section class="history" style="background-color: white;">
<h2>Our History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat ea magni suscipit modi sapiente. Perferendis odit, incidunt, amet adipisci, quaerat aperiam, impedit nemo excepturi culpa quis libero nostrum molestiae error eveniet ipsa repellat? Cum quae laudantium totam neque provident fuga rerum quasi dolorum vel obcaecati quidem perspiciatis iure maiores dignissimos, recusandae enim error libero nobis inventore quo adipisci perferendis. Pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, dolor.</p>
</section>
<section class="services" id="services">
<div class="wrapper">
<h1>Services</h1>
</div>
<div class="content">
<div>
<ul class="skills">
<li><p style="color: rgba(102,102,102, 0.85);">Flatwork</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Paving</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Driveways</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Sidewalks</p></li>
</ul>
</div>
<div class="move">
<ul class="skills">
<li><p style="color: rgba(102,102,102, 0.85);">Foundations</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Flooring</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Seismic Retrofit</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Other Concrete Concerns</p></li>
</ul>
</div>
<div>
<ul class="skills">
<li><p style="color: rgba(102,102,102, 0.85);">Commercial</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Residential</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Decks and Patios</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Kitchen Flooring</p></li>
</ul>
</div>
<div>
<ul class="skills">
<li><p style="color: rgba(102,102,102, 0.85);">Demolition</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Grading/Clean up</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Slab Repair</p></li>
<li><p style="color: rgba(102,102,102, 0.85);">Curb Repair</p></li>
</ul>
</div>
</div>
</section>
<section class="testimony">
<div class="block">
<span><i class="fas fa-quote-left left-quote"></i></span><h1 class="first-quote">Most companys that I searched charged way too much, until I found Kane. They were fast, cheap, and very professional. I'm happy I chose them and will definitely keep them in mind for any other of my future projects.<span class="quote"> -Some Person</span></h1>
</div>
<div class="block">
<span class="move-quote"><i class="fas fa-quote-left left-quote"></i></span><h1 class="move-quote">I was very impressed with their work. They were cost effective and efficient and overall a good team. Saw a lot of synergy with their organization and others they worked with. They definitely know what they're doing.<span class="quote">-Some Person</span></h1>
</div>
</section>
<section class="footer">
<div class="wrapper">
<div class="links">
<div class="inner">
<h1><span>Quick Links</span></h1>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="about.html#services">Services</a>
<a href="careers.html">Careers</a>
<a href="contact.html">Contact</a>
<a href="contact.html#quote">Quote</a>
</div>
</div>
<div class="social">
<div class="inner">
<h1><span>Social</span></h1>
<i class="fab fa-linkedin"><a href="#" class="social-net"></a></i>
<i class="fab fa-facebook"><a href="#" class="social-net"></a></i>
<i class="fab fa-twitter-square"><a href="#" class="social-net"></a></i>
<button name="msg">Send</button>
<textarea name="msg" class="footer-textarea" cols="45" rows="5" placeholder="Send is some feedback..."></textarea>
</div>
</div>
<div class="contact">
<div class="inner" class="wrap">
<h1><span>Contact</span></h1>
<p>(208)546-7827 - <span class="dark">Matt</span></p>
<p>(208)546-7827 - <span class="dark">Keegan</span></p>
<p><span class="dark">Address</span> - P.O. Box 50860 IF, ID 83405</p>
<p><span class="dark">Email</span> - KaneConcrete@fake.com</p>
</div>
</div>
</div>
<div class="copyright"><span>© 2019 - Kane Concrete & Construction | ALL RIGHTS RESERVED</span></div>
</section>
<script src="../script.js"></script>
</body>
</html>
