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

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#navigation {width: XXXpx; }

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