リストマークの位置が合わない

Question

模写コーディングを行っています。思い通りならないため改善点指摘お願いします。
左側のリストです。
リストマークをbackground-imageで指定しているのですが位置が指定できないためバランスが悪くなっています。
list-style-position: outside;を指定しても変わらず.．．
あとリストを区切る下線の終わりの部分をどのように指定していいのか分からず右に寄ってしまっています。

見本↓（URL　https://haniwaman.com/sample/part3/template_08/）

現在↓

    <div>
        <div class="wrapper">
            <div class="list">
                <p>一般歯科</p>
                <ul>
                    <li><a href="#">虫歯治療</a></li>
                    <li><a href="#">歯周病治療</a></li>
                    <li><a href="#">入れ歯</a></li>
                    <li><a href="#">予防歯科</a></li>
                </ul>
            </div>    
        </div>
    </div>

.wrapper {
    padding: 10px 200px;
}

.list {
    width: 300px;
    border: 2px #82c4c3 solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.list p {
    margin: 0;
    padding: 10px 20px;
    background:linear-gradient(#abe1e0,#82c4c3);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: white;
}
.list li {
    background-image: url(images/square.png);
    background-repeat: no-repeat;
    list-style-type: none;
    padding: 3px 20px 5px;   
    border-bottom: 1px solid #82c4c3;
    margin-bottom: 2px; 
}
.list a {
    text-decoration: none;
    color: rgb(80, 79, 79);
}
.list a:hover {
    color: #82c4c3;
}

Answer 1

background-position: left center; を追加したらどうでしょうか。

.list li {
    background-image: url(images/square.png);
    background-repeat: no-repeat;
    background-position: left center;
    list-style-type: none;
    padding: 3px 20px 5px;
    border-bottom: 1px solid hsl(179deg 36% 64%);
    margin-bottom: 2px;
}

ショートハンド（省略記法）で書くこともできます。

    background: url(images/square.png) no-repeat left center;

あと、下線は 左右マージンを適切に設定すればいいでしょう。
模写先は下記のように設定してます。

margin: 0px 12px;

Comments

[ooaai]

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