devstudent

Самый простой вариант вот так

<ul class="parent">
  <li class="child"></li>
   <li class="child"></li>
   <li class="child "></li>
  </ul>

стили

* {
box-sizing: border-box;
}
.parent {
  list-style-type: none;
  display: block;
  width: 500px;
  position: relative;
  padding: 0;
  margin: 10px;
  height: 150px;
  border:1px solid blue;
}
.child {
  position: relative;
  width: 30%;
  height: 100%;
  border:1px solid red;
  display: block;
  float: left;
  margin-left: 2.5%;
}

конкуренция среди мадженрто-разработчиков ниже, потому что их меньше , поэтому работа есть и оплата на уровне. как хотите. по-моему стоит. но это станет понятно только когда изучите, а пока учить тяжело - кажется , что не стоит

after и bafore будут всегда перекрывать своих родителей по оси z , чтобы этого не было , придется добавить еще один блок, расположить его под нужным элементом черех z-index а потому уже это дополнительному элементу сделать after и before и все что хотите

отключайте кеш частично, тогда будет быстрее

надо измерять высоту окна, расстояние от верха окна до вашего элемента, путь пройденый скроллом , и если позиция вашего элемента + небольшой зазор (иначе срабатывать будет как только первый пиксель элемента появится из-под нижнего края окна браузера и анимации не будет заметно, она произойдет внизу ) в пикселях меньше чем расстояние пройденное скроллом + высота окна, то значит он видим на экране, можно с ним делать анимацию или еще что там

$(document).ready(function(){
			$(document).bind("scroll",function(){
				$(".scroll-appear").each(function(){
					var position = $(this).offset().top;
					var classToBeAdded = "visible";
					
					if (position+150 < $(window).scrollTop() + $(window).height()){
						$(this).addClass(classToBeAdded);
					}
					
					
					if (position+$(this).height()+600 < $(window).scrollTop() + $(window).height()){
								$(this).removeClass(classToBeAdded);
					}
						
					
				});
			});
		});

используя события скролла, через джаваскрипт

а где прописаны размеры, которые должно принимать изображение фона? background-size:cover; попробуйте.

потому что в коде поверх selecta наложены элементы button и div и вам над менять их стили, а у радио поверх них лежат дивы с фоном , вот:

.iradio_square-blue {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    background: url(blue.png) no-repeat;
    border: none;
    cursor: pointer;

надо посмотреть в бутстрап, возможно достаточно заменить класс на .iradio_square-red и они станут красными, если нельзя так и ли вам не подходит то просто переопределить стили в вашем css-файле , убрать фон или поставить другой

на ваших скринах верстки и макета разные ширины колонок визуальна дажею. и то, что 4 колонки это означает всего лишь, что они занимают 25% ширины окна браузера. может и не поместится. какая у вас ширина макета? а ширина вашего сайта в браузере? если в макете больше, то конечно не поместится, надо все проверить.

а как насчет готовых решений, например Фансибокс

напрвление - джаваскрипт

сделайте без float:left;
используйте вместо флоатов display:inline-block;

ну и пусть не устанавливается , размер его все равно можно посмотреть и жирность и название видно что еще надо чтобы сверстать,чего вы мучаетесь, забейте. главное, чтобы в html нормально подключился)) )а для проверки верстки на pixel perfect есть инструмент в хроме например - так и называется