Как сделать так, чтобы элемент footer не сдвигался вниз по странице из-за элемента main?

Чтобы зафиксировать footer внизу страницы и избежать сдвига его содержимого из-за элемента main, можно использовать CSS свойство position: fixed для footer. 

Пример CSS стилей для footer:

```css
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
}
```

Этот код зафиксирует footer внизу страницы, при этом он будет оставаться на месте даже при увеличении размера main или прокрутке содержимого страницы. 

Также можно использовать сочетание CSS свойств position: fixed и z-index, чтобы убедиться, что footer всегда остаётся внизу страницы:

```css
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px;
  z-index: 999;
}
```

Этот код позволяет задать порядок слоев для footer, чтобы он оставался видимым над другими элементами страницы.