Space after h1 text-CodePudding

I have two h1 side by side and I want a space between the two textes.I tried it with just adding space with the spacebar, but it doesn´t work.

header div {
  display: flex;
}

<header>
   <div>
      <h1 id="heading1">Hello my name is </h1>
      <h1 id="heading2"> Paul</h1>
   </div>
</header>

CodePudding user response：

Try using  
It's a dedicated HTML character attributed to "space".

Example:

<div>
  <h1>Hello my name is</h1>&nbsp;
  <h1>Paul</h1>
</div>

You can also put it inside of HTML tags, like the <h1>, but I personally prefer it outside of it.
I also personally prefer using   in general since it's a more explicit way to symbolize "space", whereas implicit spaces (" ") sometimes get "lost in translation", so to speak..

CodePudding user response：

If you use flex you need to read the docs https://developer.mozilla.org/fr/docs/Web/CSS/flex

and understand how the layout works. In your case, the div take 100% of the width and each h1 is align left by default. You can set

justify-content: space-between; on the div by example, for more see this

CodePudding user response：

trying adding a margin to one of your h1. And please don't use two h1 on a single page.

CodePudding user response：

Remember h1 is a block level element. It will always be in one line. To bring them in same line, change display to inline-block like so.

h1 {
  display: inline-block;
  margin: 0;
}

<div>
  <h1>Hello my name is</h1>&nbsp
  <h1>Paul</h1>
</div>

CodePudding user response：

There are multiple ways to do it. One of them is:

#header {
  display: flex;
  gap: 1vw;
}

<div id="header">
  <h1 id="heading1">Hello my name is </h1>
  <h1 id="heading2">Paul</h1>
</div>