我在此网页中有一个服务部分。在此部分中，我有4个列表。每个ul是一个弹性项目，弹性基准为25％。当我缩小页面但它位于ul或div时，是否被推到页面之外？我确实在每个ul上都设置了一个左空白。关于什么原因的任何想法？
p.s发布的代码只是为了我可以发布此小提琴链接
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>
答案 0 :(得分：0)
原因是您的组件喜欢固定大小的文本。因此，当您缩小页面时，组件会溢出。就像评论中所说的那样，您可以创建媒体查询以在屏幕较小时为您提供帮助。
因此，当您缩小页面时，
的大小为1.35rem，因为
mul