Denis

1. Возможно картинки не по размеру, и поэтому только кажется, что они не по центру (вы не отправили картинки, поэтому это только предположение)
2. Для каждой картинки примените свойства: transform: translate(-50%);

Полная версия в комментах

Вы ошибаетесь, это не fixed.
Это position:sticky

JS уберите, он ломает поведение.

section{
  width:50%;
  height:1000px;
  margin: 0 auto;
  background: linear-gradient(to top, #fefcea, #000);
}

p {
  margin: 0;
  border-bottom: 1px solid #000;
  padding-top: 10px;
  padding-bottom: 10px;
}
p:hover {
  cursor: pointer;
  background: red;
}
.api-nav {
  transform: translateX(-110%);
  background-color: aqua;
  text-align: center;
  position: sticky;
  width:100px;
  min-height: 100px;
  margin: 0; padding: 0;
  top: 0;
}

Самый лучший вариант отработки материала - создать сайт знакомому.

Вот он попросит сделать "карусель" на сайте, и если ты достаточно упорный, то найдёшь инфу и получишь +XP

Посмотри как верстать Email-письма :)

Подтяни PHP. Просто базовый уровень, остальное будешь учить в работе и практике.