The font adds a small left margin that cannot be overridden with CSS

Question

As you can see in the following snippet, the first letter of the word "Rails" has some baked space that cannot be removed using CSS, so it does not match with another element. I left as many browser styles as possible, but still remains.

Can someone explain why this is happening / where does this stock come from, and then how to get around it?

.debug-border {
  border-left: 1px solid blue;
}
.main-title {
  font-size: 100px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-5">
      <h3 class="main-title">Rails</h3>
      <!--We are an international tech company etc etc..-->
      <p class="debug-border">We are an international tech company.
        <br>We build products.</p>
      <div class="addmargin-top-xl">
        <a href="#" class="btn btn-default btn-lg">what we do</a>
      </div>
    </div>
  </div>
</div>

Run codeHide result

Answer 1

This can be considered a hack . But if that works, you can move on. Use negative text-indent. Keep in mind that it does not scale.

.debug-border {
  border-left: 1px solid blue;
}
.main-title {
  font-size: 100px;
  text-indent: -5px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-5">
      <h3 class="main-title">Rails</h3>
      <!--We are an international tech company etc etc..-->
      <p class="debug-border">We are an international tech company.
        <br>We build products.</p>
      <div class="addmargin-top-xl">
        <a href="#" class="btn btn-default btn-lg">what we do</a>
      </div>
    </div>
  </div>
</div>

Run codeHide result

Answer 2

, ; ( , ).

, , "R" CSS. , , : , .

Answer 3

As a workaround, you can use a negative value margin-lefton .main-title:

.debug-border {
  border-left: 1px solid blue;
}
.main-title {
  font-size: 100px;
  margin-left: -6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-5">
      <h3 class="main-title">Rails</h3>
      <!--We are an international tech company etc etc..-->
      <p class="debug-border">We are an international tech company.
        <br>We build products.</p>
      <div class="addmargin-top-xl">
        <a href="#" class="btn btn-default btn-lg">what we do</a>
      </div>
    </div>
  </div>
</div>

Run codeHide result