HTML・CSS(Sass)のメニューバー

画像のメニューバーを作りたいです。

ロゴとメニュー名の素材は画像で、メニューの文字はテキストです。
コードを打っているのですが、画像が切れます。
メニューの画像を90px 40pxにしたいです。
メニューの黄色い背景は高さ80px、横幅は１００％
ロゴは120pxの40px,マージンは23px 0px 17px 90pxにしたいです;

今、このような具合になっています。説明](0ba1c0c9aec2177534689a32e51c6f6d.png)](46f36f5d159668beaa1275fbfe4dcead.png)

コードは以下のようにしています。
お力そえをお願いいたします。

<html lang="ja">
<head>
  <link rel="shortcut icon" href="./assets/images/">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>POKKE</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="現場で役立つWebスターターのためのサイト">
  <meta name="keywords" content="Webデザイナー,Web制作,Webデザイン,Webサイト,GitHub,Git,共同開発,配色,デザイン,HTML,CSS">
  <link rel="stylesheet" href="./assets/css/style.css">
  <script src="./asset/js/openclose.js"></script>
  <script src="./asset/js/fixmenu.js"></script>
  <script src="./asset/js/fixmenu_pagetop.js"></script>
  <script src="./asset/js/ddmenu_min.js"></script>
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <header>
    <div class="header__inner">
      <div class="header__inner-logoimg">
          <a href="index.html">
            <div class="logo_img"><img src="./assets/images/logo.png" alt="ロゴマーク"></div><!--logo_img-->
          </a>
      </div><!--header__inner-logoimg-->
      <nav id="menubar" class="menubar__nav">
      <ul class="menubar__nav-ul">
        <li class="menubar__nav-li"><a href="index.html">ホーム</a></li>
        <li class="menubar__nav-li"><a href="#">知識</a></li>
        <li class="menubar__nav-li"><a href="#">用語</a></li>
        <li class="menubar__nav-li"><a href="#">ブログ</a></li>
        <li class="menubar__nav-li"><a href="#">制作者</a></li>
        <li class="menubar__nav-li"><a href="#">✉️お問合せ</a></li>
      </ul>
    </nav>
  </div><!--header__inner-->
  </header>
  <div id="content" class="contents">
    <div id="contents-in">
      <aside id="mainimg">
        <img src="./assets/images/main.png" alt="メイン" class="main">
      </aside>

</body>
</html>

コード

header　{
  background-color:#EDD267;
  height: 80px;
  width: 100%;
  .logo_img{
    width: 120px;
    height: 40px;
    margin: 23px 71px 17px 90px;
    position: absolute;
  }
  .menubar__nav-ul {
    display: flex;
    background-image: url(../images/menu.png);
    .menubar__nav-li {
      width: 90px;
      height: 40px;
      margin: 23px 71px
    }
    a{
      text-align: center;
      color:#fff;
    }
  }
}
コード

itagagaki

2021/06/28 01:33

これから調整していかれることなのだと思いますが、何がお困りで質問をされているのですか？

Rchan

2021/06/28 01:39

1枚目のようにしたいです。今はメニューの画像が大きすぎる、ロゴにかかっている、間隔が取れません。他のやり方も試したのですが画像が切れてしまったりしました。

hatena19

2021/06/28 01:40

SCSS ですか。だとしたらタグにSCSSを追加してください。あと、CSSコードが途中からになっています。コード全体を提示してください。

yambejp

2021/06/28 01:44

提示されたHTMLもCSSも中途半端です必要なところはきちんと提示し、不要なところ可能な限り削除してください

Rchan

2021/06/28 02:12

いかがでしょうか？

2ckD

2021/06/30 12:18

menu.pngのデータも貼っていただけると検証がしやすいです。

行動規範の内容に同意します

回答1件

背景の指定位置が適切ではなさそうですね。
リストの要素一個一個に背景を敷きたいのかなと思いますので、指定するべき要素はmenubar__nav-liが適切かと思います。
あとは要素の幅や高さや余白、backgroundでいろいろ調整すれば1枚目のようなデザインが再現できると思います。
backgroundは位置やサイズなども調整できますので参考にしてみて下さい。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/background

投稿2021/07/01 16:41