David Halkin

у вас полностью не правильный код. не надо никаких

.column2 {
  transform: translate(610px,-55px)
}

по факту вот как раз эти фиговины и наезжают на "соседей" и перекрывают ваши левые инпуты



вариант пофиксить это- сделать нормальный код

input{
    &:-ms-input-placeholder {
        color:#fff;
    }
    &::-moz-placeholder {
        color:#fff;
    }
    &::-webkit-input-placeholder {
       color:#fff;
    }
    &.dark{
    	&:-ms-input-placeholder {
	        color:#000;
	    }
	    &::-moz-placeholder {
	        color:#000;
	    }
	    &::-webkit-input-placeholder {
	       color:#000;
	    }
    }
}

<ol style="display: table; margin:0 auto;">
		<li>Математика</li>
		<li>Физика</li>
		<li>Химия</li>
		<li>История</li>
		<li>Информатика</li>
	</ol>

1. смотря что нужно
2. можно, но я бы не перегружал продж флексами. где-то читал на эту тему что у браузера могут быть лаги если очень много флексов.
3. надо пойти на галеру и там проработать хотя бы год\2 .получить опыт и базу ,а потом можно и на фриланс уйти, если это вам будет ещё нужно и он вас ещё по прежнему будет манить призрачной свободой
4. слово conteiner немного не так пишется как вы его написали

{
font-size: 0;
line-height: 0;
text-indent: -9999px;
overflow: hidden;
}

.pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: false}))

а вообще Кирилл прав, ваше дело сделать отличный код а как он там выглядит то дело уже второе. + всегда можно его минифицировать +почистить и отсортировать