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>
  <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">
         Forest town 
               <li>Company Profile</li>
             Clean in the city 
             A comfortable life with clean air 
          <p>House cleaning</p>
              <li>Air conditioner</li>
              <li>Office floor cleaning</li>
              <li>Cleaning the inside of the restaurant</li>
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 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? * /