bootstrapでnavbar で一番左側のタイトル部分を削除すると生じる隙間を削除したい

Question

コード
```bootstrapでnavbar で一番左側のタイトル部分を削除すると生じる隙間を削除したいのですが、どのようにしたらよいでしょうか？
新たにCSSの内容を上書きするstyle.cssを作成して打ち消しながらレイアウトをしています。

<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarEexample"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">タイトル</a> </div> <div class="collapse navbar-collapse" id="navbarEexample"> <ul class="nav navbar-nav"> <li class="active"><a href="#">メニューＡ</a></li> <li><a href="#">メニューＢ</a></li> <li><a href="#">メニューＣ</a></li> </ul> </div> </div> </nav> ``` の <a class="navbar-brand" href="#">タイトル</a> を削除すると 左端にスペースが生じます。 これを削除しようとしていますが、うまくいきません。 上書きするcssファイルに padding:0;などを設定していますが。 まだ残っています。 どのようにしたらよいでしょうか？ Tggle メニューが崩壊してしまったりしています。

下記のようにスマホ以外の場合にCSSファイル情報を上書きしてToggleメニューが崩れないように設定をしたつもりなのですが・・・崩れてしまいます。
PC、タブレットサイズはToggle メニューが表示されないので、影響は受けていません。

@media only screen and (min-width : 480px) {
  nav .container-fluid,
  .navbar-collapse {
    padding-left: 0px;
  }

  .navbar-brand {
    display: none;
  }
}

@media only screen and (min-width : 768px) {
  nav .container-fluid,
  .navbar-collapse {
    padding-left: 0px;
  }

  .navbar-brand {
    display: none;
  }
}

@media only screen and (min-width : 992px) {
  nav .container-fluid,
  .navbar-collapse {
    padding-left: 0px;
  }

  .navbar-brand {
    display: none;
  }
}
@media only screen and (min-width : 1200px) {
  nav .container-fluid,
  .navbar-collapse {
    padding-left: 0px;
  }

  .navbar-brand {
    display: none;
  }
}

ご教授頂ければ幸いです。
どのようにしたらよいの

Answer 1

他に影響が無いか念の為確認して下さい。

nav .container-fluid,
.navbar-collapse {
  padding-left: 0px;
  padding-left: 0px;
}
.navbar-brand {
  display: none;
}

Comments

[hidepon]

ザックリと検証してOKかと思いきや、スマホのサイズにした際に崩れたりしていました。ちょっと考えてみます。有難うございました。

[hidepon]

Toggle menuが崩壊してしまいました・・・。

[yuki84web]

スマホサイズで崩れるのはpaddin-leftを0にしたことが原因ですね。
メディアクエリでToggle menuを表示しないレイアウトの時だけ適用するようにすれば良いでしょう。

[hidepon]

ああーーーなるほど。ちょおおおと試してみます

[hidepon]

メディアクエリをザクッと書きましたが、いまだに解決しませんね・・・・orz

[hidepon]

メディアクエリの書き方間違っていました。

[hidepon]

正しいのはこれですね
@media screen and (min-width: 1200px) {
.navbar-collapse {
padding-left: 0px;
}

.navbar-brand {
display: none;
}
}

@media screen and (max-width: 1199px) {
.navbar-collapse {
padding-left: 0px;
}

.navbar-brand {
display: none;
}
}

/* col-sm- 991px 以下 */
@media screen and (max-width: 991px) {
.navbar-collapse {
padding-left: 0px;
}

.navbar-brand {
display: none;
}
}
有難うございました。