HamSter

Причины разные могут быть! Настройка config.rb в первую очередь, установка и версия ruby, sass.

По вашему вопросу и описанию, сложно понять, что может быть причиной!

пример

Попробуйте добавить object-fit: cover;

Сколько много букв и все не о чем!
Простая истина для начинающих - "Начните!".

У меня, просто, та же беда! Никак не могу начать, даже, изучать cms, то боюсь, что не освою, то не знаю с какой стороны подойти, то 5, то 10-ое!

А суть как и со всем остальным - нужно что-то начинать. Для начала открыть гугл и найти документацию, статьи, уроки ... а там как и с программированием.

Раз освоил js, значит и все остальное освоишь!

анимация width\height

еще как вариант

Попробуйте добавить -moz- префикс
-moz-animation: ... ;

за 300р сделаю!

.nav>li>a {
  background: url(images/nav-div.png) no-repeat right center;
}

фон у ссылок - и есть ваша "рисочка"

Пером выделяешь и вырезаешь!

greensock в помощь!

пример*

Static HTML: iframe tabs

Ищи создание страницы на facebook (static html facebook) - полно ресурсов. например

*если я правильно поняла вопрос

960px стандарт - не промахнетесь!!!

в тостере не хватает опции "Ванга"

Если с классом .flipInX то пример

.game-info {
  transition: all .52s ease-in-out;
  opacity: 0;
  transform: translateX(1000%);
}

.game-info.hidden {
  opacity: 1;
  transform: translateX(0%);  
}

Поменяй их в html, если так принципиально!

<div class="container">
  <div class="block block1"></div>
  
  <div class="block block3"></div>
  <div class="block block2"></div>
</div>

У вас идет block2 (red) перед block3 (blue) потому он и "флоатнее right"!
Почему? - Кто первее - тот и в приоритете!

*пардон за объяснение )