Css change spacing between two headers - html

Question

At the moment I am trying to change the distance between the two headers but I can't seem to remember how.
my css for the header is
.header {
font-family: "Karla" !important;
color: #4e4e4e;
}
and part of the html specific to the header is
<div class="header">
<h1 style="display: inline-block">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
the two headings are very close to each other and I would like to separate them more but I can't remember how. I have tried using margin and padding but it doesn't seem to be spacing them out.
The entire website looks like
Thanks

Answer 1

I would recommend the following CSS:
.header h1 { margin: 0px 10px; }
Change the second value (10px) for more horizontal space. This will also keep the headers in the center by adding space for each header on both sides: left & right.
My recommendation would also be to remove the style attribute from the h1 elements and add it to the CSS above. The final CSS would be:
.header h1 {
margin: 0px 10px;
display: inline-block;
}

Answer 2

You can add these three options and play with it:
.header {
font-family: "Karla" !important;
color: #4e4e4e;
line-height: 30px;
margin:0px;
padding:0px;
}

Answer 3

Well out of many ways to do that I would suggest you to add margin to your h1 tags. You can either add margin right to the first h1 tag or you can add margin left to the second h1 tag.
<div class="header">
<h1 style="display: inline-block; margin-right: 2rem;">Text 1</h1>
<h1 style="display: inline-block">Text 2</h1>
</div>
The above given HTML code snippet would do the required and if you wish to increase the space more, just change the value provided for margin right in the first h1 tag.