footerの要素が改行されてしまう

お世話になっております。
至らぬ点もあるかと思いますがよろしくお願いいたします。

現在、下記サイトを模写コーディング中なのですが
https://prog-8.com/

自作のもの

お手本

お手本と比べて自作の方は
・リストが改行されてしまっている
・右の法人向けサービスのサイズが大きい
・英語のフォントが何やらおかしい

と三つの問題が見つかってしまいました。

お手本の方のデベロッパーも見てみたのですが画像の大きさや、
左右の幅をどうやって制御しているか分からず、悩んでおります。
英語フォントの方はなんとなく理由はわかるのですが上二つの問題点が考えてもわかりません。

ご教授いただけると幸いです。
また、まだ初学者の身でしてここのコードはこう書いた方がいいよ、
などのアドバイスももしいただけましたら幸いです。

拙い文章で申し訳ありませんが、何卒よろしくお願いいたします。

HTML

    <footer>
      <div class="footer-inner">
        <div class="left">
          <img src="img/primary_logo-4d1810538e410b4c6af84210420099ca1772e8cb39013fad8532e499bcdb136e.svg" alt="">
          <div class="footer-app">
            <p>アプリ版のダウンロードはこちら</p>
            <a class="footer-ios" href="#"><img src="img/download-ios-701013f2027553d61911..svg" alt=""></a>
            <a class="footer-android" href="#"><img src="img/download-android-2469951b8a1091077c28..svg" alt=""></a>
          </div>
        </div>
        <div class="center-left">
          <h4 class="footer-leading">サービス</h4>
          <ul class="service">  
            <li><a href="#">コース一覧</a></li>
            <li><a href="#">有料会員プラン</a></li>
            <li><a href="#">中学・高校向けプラン</a></li>
            <li><a href="#">学習ロードマップ</a></li>
            <li><a href="#">サクセスストーリー</a></li>
            <li><a href="#">ヘルプ</a></li>
          </ul>
        </div>
        <div class="center-right">
          <h4 class="footer-leading">サポート</h4>
          <ul class="support">
            <li><a href="#">運営会社</a></li>
            <li><a href="#">採用情報</a></li>
            <li><a href="#">利用規約</a></li>
            <li><a href="#">法人プラン利用規約</a></li>
            <li><a href="#">特定商取引法に基づく表示</a></li>
            <li><a href="#">プライバシーポリシー</a></li>
          </ul>
          <h2 class="footer-leading">SNS</h2>
          <ul class="footer-sns">
            <li><a href="#">twitter</a></li>
            <li><a href="#">facebook</a></li>
          </ul>
        </div>
        <div class="right">
          <h4 class="footer-leading">法人向けサービス</h4>
          <div class="biz-img">
            <a href="#"><img src="img/biz_logo_ja-98cf7067364efcd4f1899de2266450871bcdd0a0c617517ac3ae738aaa340963.svg" alt=""></a>
          </div>
          <div class="text-box">
            企業のプログラミング研修を支援する、法人のお客様向けの利用プランです。
          </div>
        </div>
      </div>
        <p class="copyright">© 2014 Progate, Inc.</p>
    </footer>

CSS

footer{
  padding: 60px 10%;
  letter-spacing: .04em;
}

footer a{
  display: inline-block;
}

.footer-inner{
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
}

.footer-inner li a{
  font-size: 0.75rem;
  line-height: 21px;
  color: #2b546a;
  padding-bottom: 10px;
}

.footer-inner .footer-leading{
  display: block;
  font-size: 1.0625rem;
  height: 29px;
  font-weight: lighter;
  padding-bottom: 10px;
}


.footer-app{
  display: flex;
  flex-direction: column;
}

.footer-app p{
  font-size: 16px;
  line-height: 27px;
  color: #8491a5;
}

.left{
  padding-right: 140px;
}

.left img{
  width: 155px;
  height: 50px;
  padding-bottom:100px ;
}

.left .footer-app p{
  padding-bottom: 20px;
}

.left .footer-app img{
  height: 40px;
  width: auto;
  padding-bottom: 15px;
}


.center-left{
  padding-right:70px;
}

.center-right{
  padding-right:70px;
}



.right .biz-img{
  padding: 20px;
  max-width: 248px;
  text-align:center;
  display:inline-block;
  background-color: #fff;
  box-shadow: rgb(0 0 0 / 12%) 0 1px 6px, rgb(0 0 0 / 12%) 0 1px 4px;
  border-radius: 2px;
  transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
}

.right .biz-img img{
  vertical-align:top;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  /* padding-bottom: 20px; */
}

.right .text-box{
  display: inline-block;
  padding: 20px;
  margin-top: 20px;
  max-width: 248px;
  background-color:#F8FBFE;
  color: #8491a5;
  font-size: 0.75rem;
  line-height: 21px;
  font-weight: 400;
}


.copyright{
  font-size: 10px;
  color: #8491a5;
  font-weight: 400;
}