У меня есть раздел услуг на этой веб-странице.в этом разделе у меня есть 4 списка.Каждый уль является флекс-предметом и имеет гибкую основу 25%.Когда я сжимаю страницу, как бы ни находился ul или div, в котором она находится, выталкивается за пределы страницы?У меня есть поле слева на каждой ул.Любые идеи о том, что вызывает это?
ps опубликованный код только для того, чтобы я мог опубликовать эту скриптовую ссылку
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>