When I add a paragraph of twenty sentences the image size increases-CodePudding

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 >

  <div >
    <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 >
    <a href="">Summary</a>
    <a href="">Key Skills</a>
    <a href="">Education</a>
  </div>

  <div >
    <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

CodePudding user response：

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%;
}

CodePudding user response：

So I did some updates to your code, You should remove the semicolon from your body CSS, and centre the element you can set text-align to centre the text inside the paragraph, and set margin-right to auto as well not only margin-left so like that the links will be centred inside their containers.

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

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

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

.info h3 {
  text-align: center;
}

.info h4 {
  text-align: center;
}

.navigaton {
  display: flex;
}

.navigaton a {
  margin-left: auto;
  margin-right: 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;
  text-align: center;
  margin: 0%;
  padding: 1em;
}

<div >

  <div >
    <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 >
    <a href="">Summary</a>
    <a href="">Key Skills</a>
    <a href="">Education</a>
  </div>

  <div >
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil perspiciatis eveniet quod enim.
    </p>
  </div>
</div>