Horizontally centering text in a nested div that's set to justify

Question

I'm trying to create a responsive website (not using flex). I need to create a title over two display:table cells, and I'd like it to be centered. The main div holding the table is text-align:justify. Nothing I seem to do fixes it!

I've tried nearly everything I can find on the subject: text-align:center;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0 auto;

just plain margin: 0 auto; and numerous combinations of the above. The text remains stubbornly in the right corner.

HTML

<div class="row">
  <div class="novel novelleft">
    <div class="noveltitle">TITLE</div>
      stuff
  </div>
  <div class="novel novelright">
      more stuff
  </div>
</div>

CSS

.novel {
  display: table;
  width: 100%;
  padding: 10px;
  text-align: justify;
  text-align-last:left;
  background-color: #fff;
}
.novelleft {
  width: 40%;
  display: table-cell;
  vertical-align: top;
  padding-left: 13%;
  background-color: #fff;
}
.novelright {
  width: 60%;
  display: table-cell;
  vertical-align: middle;
  padding-right: 13%;
  background-color: #fff;
}

.noveltitle {
  font-family: 'Cinzel', serif;
  text-align: center;
}

My apologies if that's not right, I'm new here. Thanks for any help!

EDIT Here's what it's doing What I want it to do

Answer 1

If you want use divs to simulate a table, then go all the way with it.

• Use table-caption for your table's title
• The left and right cells are a group, so surround both cells in a table-row and that table-row with a table-row-group

.novel {
  display: table;
  width: 100%;
}

.novel-caption {
  display: table-caption;  
  caption-side: top; 
  text-align: center; 
  font-family: 'Cinzel', serif;  
}

.novel-row-group {
  display: table-row-group;
}

.novel-row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 15px;
}

.novel-row-group {
  display: table-row-group;
}

.novelleft {
  background-color: #bfbfbf;
  width: 50%;
}

.novelright {
  background-color: #404040;
  color: #fff;
}

* {
  box-sizing: border-box;
}

<div class="novel">
  <div class="novel-caption">
    TITLE
  </div>
  <div class="novel-row-group">
    <div class="novel-row">
      <div class="novelleft cell">stuff</div>
      <div class="novelright cell">more stuff</div>
    </div>
  </div>
</div>