Андрей Федоров

codepen.io/aliencash/pen/bpmKbw
правда не понятно, на картинке это вы так коряво нарисовали или должны быть такие кривые отступы...

Если вы хотите управлять высотой всей страницы, включающей 3 блока, то по уму вам нужен общий контейнер для этого. Причем элемент body не подходит.
Но если не перевестывать то что вы натворили можно сделать так:

.content {
min-height: calc(100vh - 483px);
}

При этом необходимо убрать все height которые вы нагородили для блока .content

Это костыль и не кроссбраузерно.

Поэтому оберните .container, .content и footer в общий контейнер, а дальше ваш вопрос решается например flex-блоком или тем же min-height, но для родительского блока.

ps: За адаптивность можно похвалить. )))

Красиво - субъективное понятие. Допустим так... В css элемента добавить
transition: transform .5s;
в :hover
transform: scale(1.5,1.5);

Допустим вот так...
codepen.io/aliencash/pen/wGyeEP

background-size
так
codepen.io/aliencash/pen/yOzmMO?editors=1100
или так
codepen.io/aliencash/pen/xVXvqP?editors=1100

SM:

echo ('<select>
');
echo ('<option value="'.$item[3].'">'.$item[3].'</option>
');
echo ('</select>');

.parent {
  margin: 50px auto;
  width: 320px;
  background-image: linear-gradient(orangered 20%, transparent 20%, transparent 80%, orangered 80%);
  padding: 10px;
  padding-right: 0;
}
.arrow {
  position: relative;
  width: auto;
  height: 200px;
  background: rgb(240,240,240);
  border-right: 10px solid orangered;
  }

UPD: Ладно, тогда так:
codepen.io/aliencash/pen/ONmOdV