How can I make the header just display in one line?

March 31, 2022

I need to make the name etc. displaying in one line. I tried out display: inline; on the "header" but it didn’t work. (im newbie)

body {
  background-color: snow;
  box-sizing: border-box;
}

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
}

header .circle {
  display: inline-block;
  height: 1.79rem;
  width: 1.79rem;
  border-radius: 50%;
}

header .circle__red {
  background: #ff605C;
}

header .circle__yellow {
  background: #FFBD44;
}

header .circle__green {
  background: #00CA4E;
}

<body>
  <header>
    <div class="circle circle__red"></div>
    <div class="circle circle__yellow"></div>
    <div class="circle circle__green"></div>

    <div class="name">
      <h3 class="name-alt">Muhammed Ali Yuruk</h3>
    </div>
  </header>
</body>

Code:
https://codepen.io/saruhankaya_/pen/rNpGMxK

>Solution :

You want display: inline; or display: inline-block; on the children of header not header. The selectors header>* or .circle, .name should work.

body {
  background-color: snow;
  box-sizing: border-box;
}

header {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 1.611rem;
}

header .circle {
  display: inline-block;
  height: 1.79rem;
  width: 1.79rem;
  border-radius: 50%;
}

header .circle__red {
  background: #ff605C;
}

header .circle__yellow {
  background: #FFBD44;
}

header .circle__green {
  background: #00CA4E;
}

header>* {
  display: inline-block;
}

<header>
  <div class="circle circle__red"></div>
  <div class="circle circle__yellow"></div>
  <div class="circle circle__green"></div>

  <div class="name">
    <h3 class="name-alt">Muhammed Ali Yuruk</h3>
  </div>
</header>