Проблемы с изображением и центрированием

Question

Пробовал MDN Docs / w3 Schools - возможно, я пропустил это, но я не могу понять, почему мое изображение не того же размера (только часть навыков), облака и горы в порядке.

Также мой "полный" разработчик стека "больше не находится в центре моего имени.

Я пробовал поля, отступы, выравнивание текста, центр и т.д. c и т.д. c

не могу понять, куда я пошел неправильно - управление версиями не вернулось к go до того, как я его сломал.

.top-container {
  background-color: #ffcb74;
}

body {
  margin: auto;
  margin-top: 0;
  text-align: center;
  background-color: white;
}

img {
  border-radius: 50%;
  height: auto;
}

h1 {
  margin: 0;
  position: static;
  font-family: 'Comfortaa', cursive;
  padding-top: 10%;
  color: #66BFBF;
  line-height: 2;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  color: #66BFBF;
  font-weight: normal;
  text-align: left;
  margin-left: 25%;
}

h3 {
  color: #11999E;
}

a {
  color: #11999E;
}

.get-in-touch {
  text-align: left;
  margin: auto;
}

.fsd {
  margin-right: 50%;
}


.contact-me {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-container {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.footer-link {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}


.skill-row {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.hello-part {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 305px;
}

.my-skills {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.webdev-Image {
  width: 25%;
}

<div class="top-container">
    <img class="top-cloud" src="cloud.png" alt="clouds-img">
    <h1>I'm Malcolm Henry</h1>
    <h2 class="fsd">a full stack developer</h2>
    <img class="bottom-cloud" src="cloud.png" alt="clouds-img">
    <img src="mountain.png" alt="mountain-img">
  </div>

  <br>

  <div class="middle-container">
    <div class="profile">
      <img class=""src="" alt="">
      <h2>Hello.</h2>
      <p class="hello-part">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
    </div>

    <div class="skills">
      <h2>My Skills.</h2>
      <div class="my-skills">
        <img class="coding-Image" src="Skills.png" alt="Skills Image">
        <h3>Lorem & Ipsum</h3>
        <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
      </div>
      <div class="skill-row">
        <img class="webdev-Image" src="web dev.jpeg" alt="2020 Web Dev Image">
        <h3>Lorem Ipsum Dolor</h3>
        <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
      </div>
    </div>
    <br>
    <div class="contact-me">
      <h2 class="get-in-touch">Get In Touch</h2>
      <h3>Lorem ipsum dolor sit amet, non elit.</h3>
      <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
      <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
    </div>
  </div>


  <div class="bottom-container">
    <a class="footer-link" href="https://www.linkedin.com/in/malcolm-henry-099305168/">LinkedIn</a>
    <a class="footer-link" href="https://twitter.com/">Twitter</a>
    <p>© 2020 Malcolm Henry.</p>
  </div>

Answer 1

«Разработчик полного стека» не центрируется, потому что вы даете ему левое поле 25% в h2 и правое поле 50% в fsd.

Фотографии в навыках имеют разные размеры потому что вы даете одному класс webdev-Image, а другому класс coding-Image, который не определен.

Один из способов исправить эти элементы показан ниже:

.top-container {
  background-color: #ffcb74;
}

body {
  margin: auto;
  margin-top: 0;
  text-align: center;
  background-color: white;
}

img {
  border-radius: 50%;
  height: auto;
}

h1 {
  margin: 0;
  position: static;
  font-family: 'Comfortaa', cursive;
  padding-top: 10%;
  color: #66BFBF;
  line-height: 2;
}

h2 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.5rem;
  color: #66BFBF;
  font-weight: normal;
  text-align: left;
  margin-left: 25%;
}

h3 {
  color: #11999E;
}

a {
  color: #11999E;
}

.get-in-touch {
  text-align: left;
  margin: auto;
}

.fsd {
  margin-left: 0%;
  width: 100%;
  text-align: center;
}


.contact-me {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-container {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.footer-link {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}


.skill-row {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.hello-part {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.bottom-cloud {
  position: absolute;
}

.top-cloud {
  position: absolute;
  right: 305px;
}

.my-skills {
  width: 50%;
  margin: auto;
  text-align: left;
  line-height: 2;
}

.webdev-Image {
  width: 25%;
}

<div class="top-container">
  <img class="top-cloud" src="https://picsum.photos/100/100" alt="clouds-img">
  <h1>I'm Malcolm Henry</h1>
  <h2 class="fsd">a full stack developer</h2>
  <img class="bottom-cloud" src="https://picsum.photos/100/100" alt="clouds-img">
  <img src="https://picsum.photos/100/100" alt="mountain-img">
</div>

<br>

<div class="middle-container">
  <div class="profile">
    <img class="" src="" alt="">
    <h2>Hello.</h2>
    <p class="hello-part">Lorem ipsum dolor sit amet, vitae volutpat, dui conubia, dolor urna. Non auctor, montes nulla distinctio.</p>
  </div>

  <div class="skills">
    <h2>My Skills.</h2>
    <div class="my-skills">
      <img class="webdev-Image" src="https://picsum.photos/100/100" alt="Skills Image">
      <h3>Lorem & Ipsum</h3>
      <p>Lorem ipsum dolor sit amet, quis in duis, iaculis id felis. Consectetuer vestibulum, nunc urna lectus, erat ligula. Hendrerit nam, lectus ante, ut lorem eros.</p>
    </div>
    <div class="skill-row">
      <img class="webdev-Image" src="https://picsum.photos/100/100" alt="2020 Web Dev Image">
      <h3>Lorem Ipsum Dolor</h3>
      <p>Lorem ipsum dolor sit amet, mauris sed consectetuer. Etiam et eu, bibendum interdum, lacus quis mauris. Curabitur wisi, quisque vel eu, rutrum nam.</p>
    </div>
  </div>
  <br>
  <div class="contact-me">
    <h2 class="get-in-touch">Get In Touch</h2>
    <h3>Lorem ipsum dolor sit amet, non elit.</h3>
    <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
    <a class="btn" href="mailto:name@email.com">CONTACT ME</a>
  </div>
</div>


<div class="bottom-container">
  <a class="footer-link" href="https://www.linkedin.com/in/malcolm-henry-099305168/">LinkedIn</a>
  <a class="footer-link" href="https://twitter.com/">Twitter</a>
  <p>© 2020 Malcolm Henry.</p>
</div>