<header class="header">

      <a href="#" class="logo"><em>たぬちべ</em></a>

      <nav class="header_nav">

        <ul class="header_nav-list-group">

          <li><a href="#">日記</a></li>

          <li><a href="#">画廊</a></li>

          <li><a href="#">販売</a></li>

          </ul>

          </nav>

          <ul class="header_button-group">

          <li class="header_button-group-item"><a href="#" class="header_button">Button:A</a></li>

          <li class="header_button-group-item"><a href="#" class="header_button">Button:b</a></li>

          </ul>

          </header>
  

@charset "UTF-8";  /* 文字コードを指定 */

/*  初期設定の為のリセットCSS（HTMLのheadに登録）  */
<link rel="stylesheet" href="https://unpkg.com/ress@4.0.0/dist/ress.min.css">


/* ＝＝＝＝ 全体の設定 ＝＝＝＝ */
a {
  /* アンダーライン消去 */
  text-decoration: none;
}

li {
  list-style: none;
}

/* ＝＝＝＝ ヘッダーの設定 ＝＝＝＝ */
.header {

  /* 背景色 */
  background-color: rgb(0, 94, 255);

  /* 表示設定 */
  display: flex;
  align-items: center;

  /* 高さ、幅 */
  height: 4rem;

  /* 境界、余白 */
  padding: 0 1.25rem;
}

.header a {
  color: #fff;
}

.header a:hover {
  color: #999;
}

.logo {
  font-size: 2rem;
}

.header_nav {
  margin: 0 auto 0 2rem;
}

.header_nav-list-group,
.header_button-group {
  display: flex;
  flex-wrap: wrap;
}
.header_nav-list-group li {
  text-wrap: nowrap;
}
.header_nav li:not(:last-child),
.header_button-group li:not(:last-child) {
  margin-right: .5rem;
}
.header_button {
  background-color: cornflowerblue;
  padding: .5rem 1rem;
  text-wrap: nowrap;
  border: .5px solid #333;
  border-radius: 2rem;
}