How can I make the blocks line up?

Question

css

I set everything without a margin, I indicate the second or third element with a negative margin and everything breaks down?

<div class="service-area service-blue text-center">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <h1>Block1</h1>
        </div>
        <div class="col-md-4" style="margin-top: -50px">
          <h1>Block2</h1>
        </div>
        <div class="col-md-4" style="margin-top: -100px">
          <h1>Block3</h1>
        </div>
      </div>
    </div>
  </div>

Answer 1

repeated like you. nothing breaks https://jsfiddle.net/6su7nc1a/1/