サイト模写においてのＨＴＭＬ＆ＣＳＳの調整

Question

前提・実現したいこと

学校の課題でサイトの模写を行っているのですが、箇条書きリストを手本のサイトのように作成したいと考えています。

発生している問題・エラーメッセージ

箇条書きの・の位置の方法が分かっておりません。

自分の画面：https://gyazo.com/b0e4ba639e59d6a52b84e311b3bacff5

手本の画面：https://gyazo.com/067bc331679447ffb63dcff596278562

該当のソースコード

 <footer id="footer" class="l-footer -v3">
            <div class="l-inner">
                <div class="footer-nav-container">
                    <div class="footer-nav footer-nav-1">
                        <h2><span>b→dashについて知る</span></h2>
                        <div class="accordion">
                            <ul class="footer-nav-list">
                                <li class="last"><a class="letterspace">特長</a></li>
                                <li class="last"><a class="letterspace">機能</a></li>
                                <li class="last"><a class="letterspace">導入事例</a></li>
                                <li class="last"><a class="letterspace">セミナー／イベント</a></li>
                                <li class="last"><a class="letterspace">プレスリリース</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-nav footer-nav-2">
                        <h2><span>Others</span></h2>
                        <div class="accordion">
                            <ul class="footer-nav-list">
                                <li class="last"><a>無料eBookライブラリ</a></li>
                            </ul>
                            <h3 class="own">オウンドメディア</h3>
                            <ul class="footer-nav-list">
                                <li class="last"><a>Marketer's Compass</a></li>
                            </ul>
                            <h3 class="own">特設ページ</h3>
                            <ul class="footer-nav-list">
                                <li class="last"><a>堤真一さん・おぎやはぎさん出演！CM特設ページ</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-nav footer-nav-3">
                        <h2><span>ご検討サポート</span></h2>
                        <ul class="footer-nav-list">
                            <li>
                                <a class="before1"></a><a class="icon_download">資料ダウンロード</a></li>
                            <li>
                                <a class="before2"></a><a class="icon_inquiry">お問い合わせ</a></li>
                            <li>
                                <a class="before3"></a><a class="icon_demo">デモリクエスト</a></li>
                        </ul>
                    </div>
                </div>

                <div class="footer-btm">
                    <div class="footer-siteid">
                        <a class="footer-siteid-logo"><img src="https://bdash-marketing.com/bdash/wp-content/themes/bdash/common//images/logo_white.svg" alt="b→dash"></a>
                    </div>
                    <ul class="footer-btm-nav">
                        <li><a>プライバシーポリシー</a></li>
                        <li><a>セキュリティ</a></li>
                        <li><a>運営：株式会社フロムスクラッチ</a></li>
                    </ul>
                </div>
                <p class="copyright">© 2010 from scratch Co.Ltd.</p>

            </div>
        </footer>


.l-footer.-v3 {
  padding: 7vw 0 0;
  background: url(https://bdash-marketing.com/bdash/wp-content/themes/bdash/common/images/footer_bg.svg) no-repeat center top/cover #fff;
  position: relative;
}

.l-footer.-v3:before {
  content: "";
  display: block;
  width: 100%;
  height: 50px;
  position: absolute;
  top: -50px;
  background: linear-gradient(rgba(255, 255, 255, 0), white);
}

.l-footer.-v3 .l-inner {
  width: 1200px;
  max-width: 95%;
}

.l-footer.-v3 .footer-nav-container {
  display: flex;
  justify-content: center;
}

.l-footer.-v3 .footer-nav {
  margin: 0 60px;
  text-align: left;
}

.l-footer.-v3 .footer-nav h2 {
  -webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
text-align: left;
color: #b8e8ff;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

.l-footer.-v3 .footer-nav-list {
  clear: both;
  padding: 0 0 0 1.5em;
  color: #fff;
  padding-inline-start: 0;
}

.l-footer.-v3 .footer-nav-list li {
  margin: 0 0 0.25em;
  position: relative;
  font-family: sans-serif;
  font-weight: 700;
}

.l-footer.-v3 .footer-nav-3 li {
  margin: 1em 0;
}

.l-footer.-v3 .footer-nav-1 .footer-nav-list a,
.l-footer.-v3 .footer-nav-2 .footer-nav-list a {
  padding: 5px 8px 5px 0;
  display: inline-block;
}

.l-footer.-v3 .footer-btm {
  margin: 80px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid #c2ecff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-footer.-v3 .footer-btm .footer-siteid-logo {
  margin-left: -4px;
}

.l-footer.-v3 .footer-btm .footer-siteid-logo img {
  width: 180px;
}

.l-footer.-v3 .footer-btm .footer-btm-nav {
  display: flex;
}

.l-footer.-v3 .footer-btm .footer-btm-nav li {
  margin: 0 0 0 3em;
}

.footer-nav-list .last::before {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  left: -1em;
  top: 0;
  bottom: 0;
  margin: auto;
  line-height:24px;
}

.own{
  -webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
position: relative;
text-align: left;
border: 0;
font: inherit;
vertical-align: baseline;
margin: 1.5em 0 0.5em;
color: #006fa6;
font-family: tbudrgothic-std, sans-serif;
font-weight: 900;
font-size: 14px;
padding :20px 0;

}

.l-footer.-v3 .footer-btm .footer-btm-nav a {
  color: #fff;
  font-size: 11px;
  position: relative;
}

.l-footer.-v3 .footer-nav h3 {
  margin: 1.5em 0 0.5em;
  color: #006fa6;
  font-family: tbudrgothic-std, sans-serif;
  font-weight: 900;
  font-size: 14px;
}

.l-footer.-v3 .footer-nav-3 .before1 {
  background: url(https://bdash-marketing.com/bdash/wp-content/themes/bdash/common/images/ico/ico_book.svg) no-repeat 10px center/20px;
  background-color: rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  display: block;
}

.l-footer.-v3 .footer-nav-3 .before2 {
  background: url(https://bdash-marketing.com/bdash/wp-content/themes/bdash/common/images/ico/ico_mail.svg) no-repeat 10px center/20px;
  background-color: rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  display: block;
}

.l-footer.-v3 .footer-nav-3 .before3 {
  background: url(https://bdash-marketing.com/bdash/wp-content/themes/bdash/common/images/ico/ico_demo.svg) no-repeat 10px center/20px;
  background-color: rgba(255, 255, 255, 0.3);
  width: 40px;
  height: 40px;
  display: block;
}



.l-footer.-v3 .before1 {
  content: "";
  left: 0;
  top: 0;
  border-radius: 25px;
}

.l-footer.-v3 .before2 {
  content: "";
  left: 0;
  top: 0;
  border-radius: 25px;
}

.l-footer.-v3 .before3 {
  content: "";
  left: 0;
  top: 0;
  border-radius: 25px;
}


.icon_inquiry,
.icon_download,
.icon_demo {
  margin-left: 10px;
}

.l-footer.-v3 .footer-nav h2 {
  margin: 0 0 1.5em;
  padding: 0 0 0.5em;
  color: #b8e8ff;
  font-family: tbudrgothic-std, sans-serif;
  font-weight: 900;
  float: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 16px;
}

.l-footer.-v3 .copyright {
  padding: 0 0 15px;
  color: #fff;
  font-size: 9px;
  font-weight: normal;
  text-align: left;
  margin-block-start: 0;
}

.footer-nav-3 .footer-nav-list {
  list-style: none;
}

.footer-nav-3 .footer-nav-list li {
  display: flex;
  align-items: center;
}

li {
  list-style: none;
}

img {
  width: 100%;
  height: auto;
}

.copyright{
  position: relative;
  top:10px;
}

試したこと

・の位置を検証ツールで確認しながら修正したのですが、上手くいかないという状況です。

Answer 1

以下のCSSを追加すると解消できそうです。

.footer-nav-list {
  padding: 0 0 0 1.5em !important;
}

Comments

[zoo_hu]

ありがとうございます！
解決できました！