All my text bunches to the side on my tribute page

All my text bunches to the side on my tribute page
0

#1

So I am in the middle of working on the tribute page and am trying to create a copy of the tribute page and all my text I tried to center stops and creates a new line about a third of the way through the site. Here is a picture Picture. Here is my code

<body bgcolor="white">
  <div bgcolor="gray">
    <div class="container">
      <div class="row">
        <div class="col-xl-4">
          <div class="well">
            <h1 class=" header black ">Dr. Norman Borlaug</h1>
            <h2 class="subtitle ">The man who saved a billion lives</h2>
            <img class="img-center" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg"> 
          <footer class="center responsive">
            <p>Dr. Norman Borlaug, third from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</p>
          </footer>
          <ul class="responsive">
            <li><strong>1914</strong>- Born in Cresco, Iowa</li>
            <li><strong>1933</strong>- Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
            <li><strong>1935</strong>- Has to stop school and save up more money. Works in the Civilian Conservation Corps, helping starving Americans. "I saw how food changed them", he said. "All of this left scars on me."</li>
            <li><strong>1937</strong> - Finishes university and takes a job in the US Forestry Service</li>
            <li><strong>1938</strong> - Marries wife of 69 years Margret Gibson. Gets laid off due to budget cuts. Inspired by Elvin Charles Stakman, he returns to school study under Stakman, who teaches him about breeding pest-resistent plants.</li>
            <li><strong>1941</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
            <li><strong>1942</strong> - Tries to enroll in the military after the Pearl Harbor attack, but is rejected. Instead, the military asked his lab to work on waterproof glue, DDT to control malaria, disenfectants, and other applied science.</li>
            <li><strong>1944</strong></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

here is the css

body {
  margin: 0
}
.center {
  text-align: center;
}
.black {
  color: black;
}
.header {
  padding: 40px;
}
.subtitle {
  font-size: 25px;
  font-style: italic;
  color: #808080;
}
.center {
  display: block;
  margin-left: 0 auto;
  margin-right: 0 auto
}
footer {
  font-size: 15px
}
.thin-white-border {
  border-color: white;
  border-width: 5px;
  border-style: solid
}

Any help would be appreciated.