Css change spacing between two headers-CodePudding

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

CodePudding user response：

You can add these three options and play with it:

.header {
  font-family: "Karla" !important;
  color: #4e4e4e;
  line-height: 30px;
  margin:0px;
  padding:0px;
}

CodePudding user response：

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 on for each header on both sides: left & right.