HTML, CSS background-colorとborderの間にできた空白の削除

Question

HTML・CSSを独学で勉強しており、現在模写コーディングにチャレンジしています。
ナビゲーションを作成中に上記のような予期していない空白が発生しました。
（背景色とボーダーの上側、右側の1pxほどの余白）

<div id="nav">
        <ul class="general">
          <li class="list-title">一般歯科</li>

#body{
  box-sizing: border-box
}
#nav .general{
  width: 100%;
  background-color: white;
  border: solid 1px #7CD0CD;
  border-radius: 12.5px 12.5px 0 0;
  overflow: hidden;
}
#nav .general li.list-title{
  width: 100%;
  background-color: #7CD0CD;
  padding-left: 17px;
  font-size: 1.1rem;
  color: white;
  font-weight: bold;
  line-height: 40px;
}

CSSのリセット用には
http://html5doctor.com/html-5-reset-stylesheet/
を使用しています。

リストの子要素li.list-titleのpadding, marginを0にして試しましたが解消されませんでした。

background-colorのプロパティはボーダーの内側までの範囲を指定していると思っていたので原因になるような箇所について全く見当がつかず困惑しています。

よろしくお願いします。

Go to codepen

質問にありました通りcodepenにアップロードしましたので見ていただけると幸いです。
また該当のページについて現在製作の途中であること、また初めての模写であるため見づらい点や多数不自然な点、改善すべき点があるかと思いますが、今回の質問にかんする箇所だけを見ていただけると幸いです。

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[yambejp]

いま例示のソースでは画像のような状況は確認できません
codepenなどどこか挙動がわかるサイトにアップできませんか？

[Lhankor_Mhy]

ズームレベルが100%ではない状態のChromeで問題が再現しました。

結構、ニッチな再現条件だと思います。
一般にはズームレベルを変化させた状態までは対応しないものですが……

Answer 1

GO to codepen を見ました。
原因はわかりませんが各<li>が920pxの20％の184pxになるべきところ
183.6pxになっており、全体で918pxになってますね・・・
全体を2px縮めてみたら収まりましたが如何でしょうか・・・？

Comments

[退会済みユーザー]

ご回答ありがとうございました。
結果根本的な原因はわかりませんでしたが、問題は解決しましたのでベストアンサーを選ばせていただきました。