画面の横幅いっぱいの長さで、<li>の文言に下線を引きたい

Question

###前提・実現したいこと
画面の横幅いっぱいの長さで、<li>の文言に下線を引きたい

###困っていること

<li> の下に border-bottom: で下線を記述しているのですが

の画像のように左に余白ができてしまい困っています。
文言の下の線を幅いっぱいまで表示したいのですが、うまくいきません。

###該当のソースコード

現状ですが、

html

    <!-- Navigation -->
    <nav class="navbar navbar-custom" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <!-- ロゴ -->
            <a class="navbar-brand" href="#"></a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
        <!-- カスタムナビゲーション -->
          <ul class="navbar-nav">
            <li class="hidden"><a href="#page-top"></a></li>
            <li><a class="page-scroll" href="#work">WORK</a></li>
            <li><a class="page-scroll" href="#team">TEAM</a></li>
            <li><a class="page-scroll" href="#">CONTACT</a></li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
        

css

.navbar-right .navbar-nav li {
  border-bottom: 1px solid #444;
}

.navbar-right .navbar-nav li {
  margin-left: -20px;
  margin-bottom: 10px;
  margin-top: 10px;
  list-style-type: none;
}

現状、上の画像のような表示をするにあって、このような記述をしています。
CSSのセレクタの記述方法や順序を変更してみましたが上手くいきませんでした。

お手数ですが、どなたか教えて頂けますと幸いです。
ご確認よろしくお願いします。

Answer 1

こちらでどうでしょう？

.navbar-right .navbar-nav {
	padding: 0;
}
.navbar-right .navbar-nav li {
	/*margin-left: -20px; 削除 */
	margin-bottom: 10px;
	margin-top: 10px;
	list-style-type: none;
}

Comments

[juke-footwork]

ご回答ありがとうございますmm

試してみたのですが、今度は文言が画面からはみ出る形になり、

.navbar-right .navbar-nav li {
margin-left: -20px;

の margin-left: -20px;を削除してみた所、修正前と同じ状況になってしまいました。

[gin]

上のを手を加えずそのまま貼り付けてもダメでした？？

[gin]

あ、他のどこかで指定されてるかもしれないのか。
では、これをまるごと貼り付けてください。
-------
.navbar-right .navbar-nav {
padding: 0;
}
.navbar-right .navbar-nav li {
margin: 10px 0;
border-bottom: 1px solid #444;
list-style-type: none;
}
-------

[juke-footwork]

ダメでした。。
別の記述に問題がありそうでしょうか？

[gin]

これでもダメでした？？
-------
.navbar-right .navbar-nav {
padding: 0;
}
.navbar-right .navbar-nav li {
margin: 10px 0;
border-bottom: 1px solid #444;
list-style-type: none;
}
-------

[juke-footwork]

うーん、だめでした。。
なぜか下線も表示されなくなってしまいました。

[juke-footwork]

すいません、反映遅れていたようでいけました！
ちなみに線の長さはそのままで文字の位置だけずらすことは可能でしょうか？

[gin]

どんな感じにずらすかですが、とりあえず、「.navbar-right .navbar-nav li」に「padding-left: 10px;」とか指定してみてください。

[juke-footwork]

すいません、文字の位置のほうは大丈夫そうです！
おかげさまでイメージ通りのものに修正できましたmm
ありがとうございます！

[gin]

あ、よかったですｗ

[juke-footwork]

ありがとうございましたmm

[juke-footwork]

ちなみにもし説明が長くならなければお聞きしたいのですが、

「.navbar-right .navbar-nav li」に「padding-left: 10px;」

の記述で、線の長さは変わらずに文字の位置だけずれてくれるのは何故なんでしょうか？

[gin]

簡単に箱で説明すると、marginは箱同士の隙間を設定します。
paddingは箱の中に新聞紙なんかの詰め物をするイメージですね。
左に新聞紙をどんどんつめていくと中身のお皿とかはどんどん右にいきますよね。

詳しくはこちらなどがよいかと。
・[CSS]マージンとパディングの使い分けをおさらい
http://coliss.com/articles/build-websites/operation/css/901.html

[juke-footwork]

ありがとうございます、理解できました！
助かりました、ありがとうございますmm