lnked

Есть такой инструмент bearcss.com

Добавьте этот код

@media (max-width: 540px) {
	#footer {
	    overflow: hidden;
	}
}

на флексах

Генератор сеток

Возможно шрифт не поддерживает кириллицу, укажите альтернативные шрифты которые поддерживают кириллицу

можно так

Написал для этого shell script, создание нового проекта выглядит так ./install.sh

#!/bin/bash 

folder_name=$1 #присваиваем переменной parametr1 значение первого параметра скрипта

# тут нужно указать правильный путь
ROOT='/Applications/MAMP/htdocs/markup.dev'
GREEN='\033[0;32m'
RED='\033[0;31m'
NC='\033[0m'

echo -e " "

# Создаем папку проекта если ее нет
#
if [ -d "$folder_name" ] ; then
	echo -e "${RED}Папка $folder_name существует${NC}\n"
else
	mkdir $folder_name
	echo -e "${GREEN}Создана папка $folder_name${NC} \n"
fi

# Переходим в папку
#
cd ./$folder_name

# создаем ссылку на папку node_modules, в итоге у нас 1 папка с плагинами и диск не захламляется 
ln -s ${ROOT}/clean/node_modules/ ${ROOT}/$folder_name/

mkdir assets dist assets/template assets/scripts assets/images assets/styles assets/fonts

# Копируем файлы

cp -r ${ROOT}/clean/.jshintrc ${ROOT}/$folder_name/.jshintrc
cp -r ${ROOT}/clean/gulpfile.js ${ROOT}/$folder_name/gulpfile.js
cp -r ${ROOT}/clean/package.json ${ROOT}/$folder_name/package.json
cp -r ${ROOT}/clean/assets/template/* ${ROOT}/$folder_name/assets/template/
cp -r ${ROOT}/clean/assets/styles/* ${ROOT}/$folder_name/assets/styles/
cp -r ${ROOT}/clean/assets/scripts/* ${ROOT}/$folder_name/assets/scripts/

echo -e "Проект ${GREEN}$folder_name${NC} успешно создан"

gulp build
gulp

exit 0

Делайте картинки в очень плохом качестве все что есть) если кидалово хоть намучаются вырезать заново

Практически все то же что и у вас (только футер прижимаю немного по другому) +

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

button {
	cursor: pointer;
}

input, textarea, button {
	outline: none;
}
input, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.inner {
	width: 100%;
	display: table;
}
.inner:after {
	width: 100%;
	clear: both;
	display: block;
	content: ' ';
}
* html .inner {
	margin-left: -3px;
}

::-webkit-input-placeholder { color: #000000; opacity: .45; }
:-moz-placeholder { color: #000000; opacity: .45; }
::-moz-placeholder { color: #000000; opacity: .45; }
:-ms-input-placeholder { color: #000000; opacity: .45; }

.disable-hover {
	pointer-events: none;
}