I am trying to learn html and css the page I created below has an issue, whenever I add sentences to the paragraph the image size increases. I watched videos, and searched Google, but found no fix. Can someone please help me with the code, and explain what was wrong?

body {
  background: #222831;
  ;
  padding: auto;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  justify-content: center;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
}

.info img {
  display: block;
  margin: auto;
  border-radius: 50%;
  max-width: 50%;
}

.info h3 {
  text-align: center;
}

.info h4 {
  text-align: center;
}

.navigaton {
  display: flex;
}

.navigaton a {
  margin-left: auto;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  opacity: 25%;
}

.navigaton a:hover {
  text-shadow: 0 0 15px cyan;
  opacity: 100%;
  color: cyan;
}

.navabt {
  justify-content: center;
  align-items: center;
  margin: 0%;
}

<div class="container">

  <div class="info">
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ac/Default_pfp.jpg" alt="error">
    <h3>Anirban Roy</h3>
    <h4>Btech in cse</h4>
  </div>

  <div class="navigaton">
    <a href="">Summary</a>
    <a href="">Key Skills</a>
    <a href="">Education</a>
  </div>

  <div class="navabt">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim. Sed nam tenetur eveniet, nostrum iusto libero.
    </p>
  </div>
</div>

I want the paragraph to be aligned to the centre, and whenever I add paragraph sentences the image size should not increase

>Solution :

I have found your issue, in CSS the body element was having most of its CSS rules ignored due the the extra colon and because of this the width wasnt been set a size which allowed the page to keep growing, and then due to the img being set half the size of the page it was also growing.
This should now work hope this helps.

body {
background: #222831;
  padding: auto;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.info {
  justify-content: center;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
}

.info img {
  display: block;
  margin: auto;
  border-radius: 50%;
  max-width: 50%;
}

.info h3 {
  text-align: center;
}

.info h4 {
  text-align: center;
}

.navigaton {
  display: flex;
}

.navigaton a {
  margin-left: auto;
  text-decoration: none;
  color: white;
  text-transform: uppercase;
  opacity: 25%;
}

.navigaton a:hover {
  text-shadow: 0 0 15px cyan;
  opacity: 100%;
  color: cyan;
}

.navabt {
  justify-content: center;
  align-items: center;
  margin: 0%;
}