Home>

I want to arrange the contents of the header side by side,
I'm trying to make the h1 element set in header in HTML a line-block.

user agent stylesheet
h1 {display: block;} is applied and is not reflected.

Corresponding source code
<! DOCTYPE html>
<html>
<head>
  <meta charset = "UTF-8">
  <title>Forest town</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
  <link href = "https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
</head>
<body>
  <header>
         Forest town 
       <nav>
           <ul>
               <li>Company Profile</li>
               <li>Service</li>
               <li>Adopt</li>
               <li>Inquiries</li>
           </ul>
       </nav>
  </header>
  <main>
      <section>
             Clean in the city 
             A comfortable life with clean air 
            
      </section>
      <section>
             Service 
          <p>House cleaning</p>
          <ul>
              <li>Air conditioner</li>
              <li>bathroom</li>
              <li>Toilet</li>
              <li>Kitchen</li>
          </ul>
          <p>etc</p>
          <p>Tenant</p>
          <ul>
              <li>Office floor cleaning</li>
              <li>Cleaning the inside of the restaurant</li>
          </ul>
          <p>etc</p>
      </section>
  </main>
</body>
</html>
html, body, h1, h2, h3, h4, ul, ol, dl, li, dt, dd, p, div, span, img, a, table, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: normal;
    font-size: 100%;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  article, header, footer, aside, figure, figcaption, nav, section {
    display: block;
  }
  body {
    line-height: 1;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
  ol, ul {
    list-style: none;
    list-style-type: none;
  }
/ * ALL * /
font-family:'Noto Serif JP', serif;
/*header*/
header h1 {
  display: inline-block! important;
}
header ul {
    display: flex;
    justify-content: flex-end;
}
What I tried

I added! important, but it didn't change.

Supplementary information (FW/tool version, etc.)

Reset CSS is a good pick up from the net.

  • Answer # 1

    h1 is properly inline-block.
    If you want the child elements h1 and nav of header to be inline-block side by side, nav must also be inline-block.

    However, if you want to arrange the header contents side by side, Flexbox is easy to use and the layout is flexible.

    For example, the following CSS can be used for side-by-side alignment, horizontal position justification, and vertical position center alignment.

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

  • Answer # 2

    / * ALL * /
    font-family:'Noto Serif JP', serif;

    This is strange.

    / * ALL * /
    * {
        font-family:'Noto Serif JP', serif;
    }/* At least like this? * /