Блог

Я пытаюсь создать кластер кнопок, на всех которых есть гиперссылка на веб-сайты, которые откроются на новой странице. У меня все работает, но я не могу понять, как оформить кнопку так, чтобы она выглядела как настоящая кнопка в коде, или как сделать ее правильной. Я ОЧЕНЬ новичок, так что это все, с чем я работал, и я не уверен, что делать дальше. Прямо сейчас они выглядят как кнопки, но они растягиваются на всю ширину обертки, и я не уверен, как это изменить. Я пробовал Bootstrap и бесчисленное множество видео на YouTube, но не могу продвинуться дальше:

    <div class="wrapper"
    <div class="row">
     <div class="col">
      <h3 class="quicklinks-title">Quick Links</h3>
       <ul class="quicklinks">
        <li><a href="https://www.webmail.east.nmci.navy.mil/" target="_blank">Webmail</a>. </li>
        <li><a href="https://webmail.west.nmci.navy.mil/owa/" target="_blank">Webmail</a></li>
        <li><a href="https://mypay.dfas.mil/mypay.aspx" target="_blank">MyPay</a></li>
        <li><a href="https://www.nsips.navy.mil/" target="_blank">NSIPS</a></li>
        <li><a href="https://www.bol.navy.mil/" target="_blank">BOL</a></li>
        <li><a href="https://www.mynrh.navy.mil/" target="_blank">Navy Reserve Homeport (NRH)</a></li>
        <li><a href="https://mynavyhr.navy.mil" target="_blank">MyNavy HR</a></li>
       </ul>
      </div>
     </div>
    </div>
 

     .wrapper {
       margin: 0 auto;
       width: 800px;
       background-color: lightgrey;
    }

    .quicklinks {
       text-align: center;
       font-size: 20px;
       padding-bottom: 5px;
       list-style: none;
    }

    .quicklinks li {
       background-color: lightblue;
       border: solid 2px lightblue;
       border-radius: 50px;
       padding: 5px 5px;
    }

    .quicklinks li:hover {
       background-color: white;
       color: lightblue
    }