Space after h1 text - html

Question

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>

Answer 1

Try using
It's a dedicated HTML character attributed to "space".
Example:
<div>
<h1>Hello my name is</h1>
<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..

Answer 2

If you use flex you need to read the docshttps://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

Answer 3

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

Answer 4

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>

Answer 5

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>

Answer 6

If you want to display two h1 elements in the same line, but color them different or anything like that, just use one h1 element and a span element. Per defintion, every html-page should just have one h1 element, because it should be used as a page-title.
Also, if you dont need the id's for js or something else, just select them via css.
Here's a full example:
#heading span:nth-child(1) {
color: green;
}
#heading span:nth-child(2) {
color: red;
}
<header>
<div>
<h1 id="heading">
<span id="first_heading">Hello my name is </span>
<span id="second_heading">Paul</span>
</h1>
</div>
</header>