Centering a div with words and a picture

Question

I am trying to center a div that contains two divs- one is a paragraph, the other an image. I tried to apply auto 0 margins to the container div, but it didn't center anything. Is there a way to get everything to center while preserving the formatting I have done in the smaller divs? My code

.whole {
  height: 800px;
  max-width: 98%;
  margin-left: 0 auto;
  margin-right: 0 auto;
  text-align: center;
}
.about-text {
  width: 40%;
  color: #66096c;
  font-family: Lucida bright;
  font-size: 20px;
  height: 100%;
  float: left;
  padding: 1.8 em;
  padding-right: 6em;
  margin-left: 5%;
  margin-right: auto;
}
.about_pic {
  width: 40%;
  height: 100%;
  float: left;
  margin-left: auto;
  margin-right: auto;
}

<div class="whole">
  <div class="about-text">
    <p> <strong> Hi, I'm Kelsie. </strong> 
      <p>
        <p>Hello there.
          <br />My name is Kelsie, and I like to create things. So I decided to do it for a job. I am learning how to do this at Michigan State University, where I study professional writing. This program teaches web design, print design, editing, and writing.
          I am also learning about how to make rhetorical decisions that will have a positive impact on an audience by studying visual design principles, website accessibility and usability laws, and persuasion techniques.</p>
        <p>I live in East Lansing where I am a full-time student. So basically I study all the time. On the rare occasions that I do have some free time, I like to read, shop, and visit my <span> home</span> cats.</p>
        <p>Want to create something together? Me too. Send me a message using the contact form, and let's get together.</p>
  </div>

  <div class="about_pic">
    <img src="https://msu.edu/~donald88/kelsie.jpg" alt="kelsie by river" align="center" />
  </div>
</div>

Answer 1

If you want the same height on elements in a row a good choice would be flexbox. If the width, for example the text, is getting to small, use a media query and make the with of the divs 100% and the flex-direction: column.

In total it could look like:

body {
  margin: 0;
}
.whole {
  display: flex;
  text-align: center;
  width: 95%;
  margin: 0 auto;
}
.whole div {
  padding: 2em;
  box-sizing: border-box;
}
.about-text {
  color: #66096c;
  font-family: Lucida bright;
  font-size: 20px;
}
@media screen and (max-width: 1000px) {
  .whole {
    flex-direction: column;
  }
  .whole div {
    width: 100%;
  }
  .whole img { /* Make image responsive */
    max-width: 100%;
    height: auto;
  }
}

<div class="whole">
  <div class="about-text">
    <p> <strong> Hi, I'm Kelsie. </strong> 
      <p>
        <p>Hello there.
          <br />My name is Kelsie, and I like to create things. So I decided to do it for a job. I am learning how to do this at Michigan State University, where I study professional writing. This program teaches web design, print design, editing, and writing.
          I am also learning about how to make rhetorical decisions that will have a positive impact on an audience by studying visual design principles, website accessibility and usability laws, and persuasion techniques.</p>
        <p>I live in East Lansing where I am a full-time student. So basically I study all the time. On the rare occasions that I do have some free time, I like to read, shop, and visit my <span> home</span> cats.</p>
        <p>Want to create something together? Me too. Send me a message using the contact form, and let's get together.</p>
  </div>

  <div class="about_pic">
    <img src="https://msu.edu/~donald88/kelsie.jpg" alt="kelsie by river" align="center" />
  </div>
</div>