<div class="contacts">
	<div class="contacts_item phone">
		<a href="tel:88001234567">
			<span class="code">8/800/</span> 123-45-67
		</a>
	</div>
	<div class="contacts_item phone">
		<a href="tel:+74732564836">
			<span class="code">+7/473/</span> 256-48-38
		</a>
	</div>
	<div class="contacts_item mail">
		<a href="mailto:info@сельхоз-корма.рф">info@сельхоз-корма.рф</a>
	</div>
	<div class="contacts_item callback">
		<a href="#">Заказать обратный звонок</a>
	</div>
</div>

Тут многие советую больше практиковаться, но, как я понимаю, с ней-то у вас проблем особых нет, а проблема как раз в систематизации имеющихся знаний и теории. То что вы сверстаете 5-10-20 макетов, но стили будете лепить также, как делаете сейчас, ситуацию это не исправит.
Так что, имхо, выделите свои слабые места и подтяните теорию по проблемным темам. Обычно это наследования, дефолтные стили, флоаты, позиционирование, флекс-боксы. Мне в своё время хорошо с этим помогла разобраться книга Мейера. Если нет времени, можно просто поискать статьи в сети. Поизучать best practice и ошибки, которые допускают новички в верстке.

getElementsByClassName возвращает массив элементов. Тебе нужно пройтись по массиву и повесить обработчик на каждый элемент.