Css change spacing between two headers

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

>Solution :

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;
}