Why doesn't li:first-child work?

Question

css

I can't figure out why first-child and last-child don't work. On the tutorial layout, the goal is to have the first and last menu item close to the edges.

<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

You have li padding:
Options 2
1 - remove padding from the left and right and give a fixed width li
2 - flip the menu to flex-box:
.top-menu-list{
display:flex;
justify-content: space-between;
align-items: center;
}
beforehand also removing padding from li