【初心者です】ヘッダーの背景の色を変更できません

Question

初心者です。教えてください。
ヘッダーにナビゲーションメニューを設置していて、その背景は黒にしています。文字は白です。

#menu {
 position: relative;
 width: 100%;
 padding-left: 0px;
 height: 40px;
 background: #343838;/*グローバルメニュー背景色*/
}
.menu-inner{
 width: 700px;/*グローバルメニュー 幅*/
 margin: 0 auto;
 height: 40px;
}
#menu li {
 list-style-type: none;
 float: left;
 height: 40px;
 text-align: center;
 width: 20%;
}
#menu li a {
 display: block;
 color: #ffffff;/*グローバルメニュー文字色*/
 font-size: 80%;
 font-weight: bold;
 line-height: 40px;
}
#menu li:hover a {
 color: #00DFFC;
 background: #ffffff;
 transition: all .5s;
}

.menu-toggle{
 display: none;
} 

/*パソコン１カラム*/
@media screen and (max-width:968px){
    .menu-inner{
        width: 768px;
    }
}

/*タブレット*/
@media screen and (max-width:768px){
 #top-editarea{
  height: auto;
  background: #343838;/*MENU背景色*/
  text-align: left;/*MENUの文字の位置*/
  width: 90%;
opacity: 0.9;
 }
 .menu-toggle{
  color: #ffffff;/*MENUの文字色*/
  display: inline-block;
  padding: 5px;
  margin: 3px;
 }
 #menu {
  width: 100%;
  display: none;
  height: initial;
  padding: 0;
  margin: 0;

 }
 .menu-inner{
  width: 100%;
  height: initial;
  position: static;
  margin: 0;
 }
 #menu li{
  float: none;
  height: 35px;
  width: 100%;
  list-style-type: none;
  background: #FFFFFF;/*リスト文字の背景色*/
  margin: 0 auto;
  text-align: left;/*リストの文字の位置*/
 }
 #menu li a {
  height: initial;
  color: #343838;/*リスト文字色*/
  display: block;
 }
 #menu li:hover a{
  color: initial;
  background: initial;
 }
}

ヘッダーへ入力したもの

<p>テスト</p>
<script type="text/javascript">
var nend_params = {"media":65121,"site":336646,"spot":997095,"type":1,"oriented":1};
</script>
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href='https://meipapa.hatenablog.jp/'>TOP</a></li>
<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%82%AA%E3%82%B9%E3%82%B9%E3%83%A1'>オススメ</a></li>
<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA'>カスタマイズ</a></li>
<li><a href='https://meipapa.hatenablog.jp/archive/category/%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%B9'>ニュース</a></li>
<li><a href='https://meipapa.hatenablog.jp/archive/category/%E6%95%99%E8%82%B2'>教育</a></li>
</div>
</ul>

このヘッダーの上に例えば文字や文章を入力したとき、その背景も黒くなってしまうのですが、何か解決方法があれば教えていただきたいです。
特にスマホからページを見ると、このようになります。

パソコンからはこうです。

例えば、ヘッダーに広告や文字を置いて（背景なし）、そこから改行をして、次の行から黒い背景にするようなことは可能でしょうか？

Comments

[kai0310]

本質問にHTTPヘッダーもタグに追加されているのですが、適正なのでしょうか？
ご確認ください。

[papapapa]

間違いです。すみません。修正します。

[kai0310]

先ほどの動作サンプルと質問本文にある画像で違いが生じています。下記リンクよりご確認ください。

https://teratail-v2.storage.googleapis.com/uploads/contributed_images/bfe52773ed6da65c1493d090e1277d75.png

[papapapa]

確認しました。
やはり上にあいてあるコードが必要ということでしょうか？

[papapapa]

本当に初心者ですみません。

[papapapa]

どなたか助けてください。

Answer 1

ヘッダーに広告や文字を置いて（背景なし）、そこから改行をして、次の行から黒い背景にするようなことは可能でしょうか？

置きたい要素はおろかヘッダーすら（中身しか）提示されていないので、具体的には回答しませんが、可能です。（更新：teratailの保存バグの対応）

Comments

[papapapa]

どういう意味でしょうか？

Answer 2

別の方法を考えます。