如何拉伸列表文本以填充网页

Question

我的网页

在上面的链接中，我有一个列表，其中我指定了服务城市，现在这个列表似乎是精简的。我试着使用内嵌CSS的字体拉伸函数来扩展它，但似乎不起作用。还有其他想法吗？

<style>
h2 {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
margin-bottom: 30px;
font-size:50px;
}
h3{
font-size:45px;

}
li{
margin-bottom: 40px;
font-stretch: 100%;
}
</style>
<h1 style='text-align:center' class='tjs-h2'></h1>
<div class="maps container-fluid" style="align-items: center; background: #F3F3F3">
<div class="row">
<div class="col">
<h2 class="font-2">Serving the Greater Twin Cities Area </h2>
</div>
</div>
<div class="row">
<div class="col-md-6 col-12 d-flex justify-content-center pb-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d90327.44687139073!2d-93.2367809086671!3d44.96942454616932!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x87f629fd5bb7538f%3A0xd070c186a8aea420!2sTwin%20Cities%2C%20MN!5e0!3m2!1sen!2sus!4v1639701112792!5m2!1sen!2sus" width="600" height="600" style="border:0;" allowfullscreen="" loading="lazy">
</iframe>
</div>
<div class="col-md-2 col-sm-4 col-
</div>
<div class="col-md-2 col-sm-4 col-12 d-flex justify-content-center">
<h3>
<ul class="cities">
<li >Minneapolis and suburbs 10 minutes in any direction</li>
<li >St. Paul and suburbs 10 minutes in any direction</li>
</ul>
</h3>
</div>
<div class="col-md-2 col-sm-4 col-
</div>

Answer 1

您可以改为加宽div。我在电脑上试过了代码。网站的显示有点不同，但这似乎有所帮助。

div#navigation {width: XXXpx; }

<div class="col-md-2 col-sm-4 col-12 d-flex justify-content-center" id="navigation">