Как правильно расставить блоки?

Question

[Valentyn Fetisov]

Всем привет! Нужна помощь.
есть вот такой блок:


пока у меня вот на такой стадии:


вот куски кода:

<section id="franshiza">
		<div class="resize">
			<h2>Франшиза включает в себя</h2>
			<ul>
				<li>
					<p>Помощь в <span>выборе помещения</span></p>
					<div class="pointer">
						<img src="">
					</div>
				</li>
				<li>
					<div class="hands">
						<img src="">
					</div>
					<p>Помощь в проведении <span>переговоров с арендодателем</span></p>
				</li>
				<li>
					<div class="brush">
						<img src="">
					</div>
					<p><span>Дизайн-проект</span> Вашего магазина</p>
				</li>
				<li>
					<div class="box">
						<img src="">
					</div>
					<p>Централизованные <span>закупки оборудования</span> у наших поставщиков</p>
				</li>
				<li>
					<div class="galstuk">
						<img src="">
					</div>
					<p><span>Обучение и тренинги</span> для Ваших сотрудников</p>
				</li>
				<li>
					<div class="puzzle">
						<img src="">
					</div>
					<p>Помощь в <span>разработке ассортиментной матрицы</span> при открытии магазина</p>
				</li>
				<li>
					<div class="calendar">
						<img src="">
					</div>
					<p>Ежегодное <span>полное обновление коллекций</span></p>
				</li>
				<li>
					<div class="sale">
						<img src="">
					</div>
					<p><span>Мерчендайзинг</span></p>
				</li>
				<li>
					<div class="track">
						<img src="">
					</div>
					<p><span>Доставка</span> изделий <span>за наш счет</span></p>
				</li>
				<li>
					<div class="manager">
						<img src="">
					</div>
					<p>Персональный <span>менеджер-куратор</span></p>
				</li>
				<li>
					<div class="network">
						<img src="">
					</div>
					<p><span>Консалтинг</span> по всем аспектам ведения бизнеса</p>
				</li>
				<li>
					<div class="printer">
						<img src="">
					</div>
					<p><span>Все модели из последних трендов</span></p>
				</li>
			</ul>
		</div>
	</section>

и стили:

#franshiza {
	width: 100%;
	background: top center url(../images/bg_2.jpg) no-repeat;
	background-size: cover;
	height: 2862px;
	position: relative;
	h2 {
		color: #303445;
		font-family: 'Scada', sans-serif;
		font-size: 55px;
		font-weight: bold;
		line-height: 45px;
		text-transform: uppercase;
		padding-top: 60px;
		text-align: center;

	}
	ul {
		li {
			display: flex;
			position: relative;
			height: 230px;
			&:nth-child(odd) {
				padding: 20px 250px 20px 20px;
				text-align: right;

			}
			&:nth-child(even) {
				padding: 20px 20px 20px 250px;
				text-align: left;
			}
			div {
				&:nth-child(odd) {
					content: "";
					left: 0;
					top: 0;
					width: 215px;
					height: 215px;
					border: 2px solid #5e7693;
					border-radius: 50%;
					display: inline-block;
					position: absolute;
				}
			}
			div {
				&:nth-child(even) {
					content: "";
					right: 0;
					top: 0;
					width: 215px;
					height: 215px;
					border: 2px solid #5e7693;
					border-radius: 50%;
					display: inline-block;
					position: absolute;
				}

			}

			p {
				font-size: 28px;
				line-height: 25px;
				color: #3a3f52;
				font-weight: 400;
				padding-top: 100px;
				span {
					font-weight: 700;
				}
			}
		}
	}
}

не могу понять почему не срабатывают стили о всем лишкам и не расставляють их так как нужно? срабатывает только на первые две.