<nav>に出現する枠を消したい・・・

Question

お世話になります。

現在の状況

リンクボックスをつくりたく<nav><ul><li>を利用してつくってみたのですが、赤い部分が消せません。

やりたいこと

実現したいことは2点です。

1. この赤枠を消したい

（nav {background-color: transparent;という解決ではなく、タブボックスがnavボックスを隙間なく埋めるような指示をだしたい）

1. タブボックスの右側だけに区切り縦線を表示させる

（最後のボックスの右側にだけは表示させない）

「+」をつかったり、「Flexbox」をつかったりしたらもっときれいにできると思うのですが、とりあえず形にできたのはここまでで、
それ以上はいろいろ試してみましたが実力不足でダメでした・・・。

よろしくお願いいたします。

その他補足情報

<nav>
<ul>
<li><a href="#">TAB1</a></li>
<li><a href="#">TAB2</a></li>
<li><a href="#">TAB3</a></li>
<li><a href="#">TAB4</a></li>
</ul>
</nav>

以下、cssはwordpressテーマ「cocoon」のなかでの挙動となります。

#main nav {
width: auto;
padding: 0;
background-color: red;
}

nav ul {
display: flex;
list-style: none;
justify-content: space-between;
}

#main nav ul li {
width: 100%;
text-align: center;
}

#main nav ul li a {
display: block;
padding: 0px 0px;
color: white;
background-color: gray;
text-decoration: none;
font-weight: bold;
padding:5px 0;
}

#main nav ul li:first-of-type a,
nav ul li a:hover {
color: #fff;
background-color: blue;
font-weight: bold;
}

ul{
margin-left:-2.4em
}

Comments

[Lhankor_Mhy]

問題が再現しませんでした。
おそらく、テーマのCSSの影響だと思います。
実際のページを見せていただくのが一番話が早いのではないかと思いますが、可能ですか？

[userHoog]

いつもありがとうございます。
申し訳ありませんが、学校関係のものでもあるため控えさせていただきます。

Answer 1

ブラウザ標準の余白などが適用されていませんか？
余分な余白を消すために、reset.css や destyle.css などで調べてみてください。

今回の範囲だけで言えば、これで余分な余白は消えると思います。

body, nav, ul, li {
    margin: 0;
    padding: 0;
}

区切り線については、最後のli以外に右線を付けるなどでいけると思います。

#main nav ul li {
    border-right: 1px solid #ccc;
}

#main nav ul li:last-child {
    border-right: none;
}

※追記ですが、ul についている「margin-left:-2.4em」は不要かと。

Comments

[userHoog]

ひとつめのcssはなぜか効かなかったのですが、2つめのcssを挿入しいろいろといじってみたら希望の形にできました。
ありがとうございました。