Почему не работает li:first-child?

Question

[equilibri90]

Не могу понять почему не работает first-child и last-child. На учебном макете задача чтобы первый и последний элемент меню был вплотную по краям.

<header>
	<div class="top-menu">
		<div class="conteiner">
			<ul class="top-menu-list">
		<li><a href="">Частным клиентам</a></li>
		<li><a href="">Малому бизнесу и ИП</a></li>
		<li><a href="">Корпоративным клиентам</a></li>
		<li><a href="">Финансовым организациям</a></li>
		<li><a href="">Акционерам и инвесторам</a></li>
		<li><a href="">Партнерам</a></li>
	</ul>
		</div>
	</div>
	<div class="contact">
		<div class="conteiner">
		<div class="logo"><img src="img/logo.png"></div>
		<div class="bankomat"><a href="">Отделения и банкоматы</a></div>
		<div class="svyaz"><a href="">Обратная связь</a></div>
		<div class="phone"><img src="img/tel.png"><a href="">[phone]</a></div>
		</div>
	</div>
    </header>

.top-menu{
	background-color: #353535;
}
.conteiner{
	width: 1140px;
	margin: 0 auto;
}
.top-menu-list li{
display: inline-block;
list-style-type: none;
padding: 14px 16px;
} 
.top-menu-list li:first-child {
 text-align: left;}
 .top-menu-list li:last-child {
 text-align: right;}

.top-menu-list a{
color: #a1a1a1;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
text-decoration: none;
}
.contact{
	overflow: auto;
}
.logo{
	width: 285px;
	float: left;
	padding: 26px 0px;
}

.bankomat a{
	font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #1e1e1e;
    border-bottom: 1px dashed #000080;

}
.svyaz a{
	font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    text-decoration: none;
    color: #1e1e1e;
    border-bottom: 1px dashed #000080;
}
.phone a{
	font-family: 'Open Sans', sans-serif;
    font-size: 18px;
	text-decoration: none;
	color: #1e1e1e;
}

Answer 1

[TheRevan]

У тебя у li стоит паддинг:


Вариантов 2
1 - убирать паддинг с лева и с права и давать фиксированную ширину li
2 - переверстать меню на flex-box:
.top-menu-list{
display:flex;
justify-content: space-between;
align-items: center;
}
заранее также убрав у li паддинг

Comments

[Одиночка Айс]

1. давать фиксированную ширину li - ооооочень вредный совет
2. флексы не панацея

Answer 2

[Одиночка Айс]

.top-menu-list li:first-child{
  padding-left:0;
}
.top-menu-list li:last-child{
  padding-right:0;
}