Random space to the left of header tag

I have an h3 tag which hold text inside of it that doesn't align correctly with the content below it. It can't be margin or padding because it is the h3 itself which contains the extra space to the left of it. I have use position relative to align it with the content below it ,but I want to understand what the problem is.Thanks in advance!

HTML:

    <div class="details_section">
      <h3>Details</h3>
      <p class="bold">Name:</p>
      <p>Kaleb Meeks</p>
      <p class="bold">Age:</p>
      <p>19</p>
      <p class="bold">Location:</p>
      <p>Mississippi,United States</p>
     </div>

CSS:

 .details_section {
   width:100%;
   height: 100%;
   padding-left:5%;
   margin-top:7%;
 }

 .details_section h3 {
   font-size:28px;
   color:#005689;
   font-weight:normal;
  }

  .details_section p {
    display:block;
    font-size:14px;
    color:#000;
  }