Why won't my text center the image?

Question

I am trying to align the title text in the middle of the page above the image. The image is centered, but the text is to the left of the page.

I tried to copy this solution, but I obviously am not doing anything right. Any help could be helpful. HTML:

    <header>
        <div class="tag">
            <h1>Some text here</h1>
            <h3>And more text here</h3>
        </div>
        <img src="http://www.placehold.it/900x300">
    </header>

CSS

    header {
      height: 200px;
      line-height: 50px;
      text-align: center;
      background: #303e49;
      position: relative;
    }

    .tag {
         text-align: center;
         background: #303e49;
         position: absolute;

    }

Answer 1

1st, you should not mark jquery calling it css

2nd add left 0 and right 0 to your absolute element to get the full width of the containing div

.tag {
         text-align: center;
         background: #303e49;
         position: absolute;
         left: 0;
         right: 0;
         z-index : 1;
    }