Не работает ntn-child правильно!
HTML:
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Golden</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="container">
<div class="heading clearfix">
<img src="img/logo.png" alt="Golden" class="logo">
<nav>
<ul class="menu">
<a href="#"><li>Home</li></a>
<a href="#"><li>Service</li></a>
<a href="#"><li>Portfolio</li></a>
<a href="#"><li>About</li></a>
<a href="#"><li>Contact</li></a>
</ul>
</nav>
</div>
<div class="titles">
<div class="titles__first">
Welcome To Our Studio!
</div>
<h1>
It's nice to Meet you
</h1>
</div>
<a class="button" href="#">Tell Me More</a>
</div>
</header>
<section id="services">
<div class="container">
<div class="title">
<h2>Services</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="services clearfix">
<div class="services__item">
<img src="img/icon1.png" alt="Услуга">
<h3>E-Commerce</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenem rhoncus posuere odio in tincidunt.</p>
</div>
<div class="services__item">
<div class="services__item2">
<img src="img/icon2.png" alt="Услуга">
<h3>Responsive Web</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenem rhoncus posuere odio in tincidunt.</p>
</div>
</div>
<div class="services__item">
<img src="img/icon3.png" alt="Услуга">
<h3>Web Security</h3>
<p>Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenem rhoncus posuere odio in tincidunt.</p>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="container">
<div class="title">
<h2>Our Portfolio</h2>
<p>Proin iaculis purus consequat sem cure.</p>
</div>
<div class="works clearfix">
<img src="img/img1.jpg" alt="Работа">
<img src="img/img2.jpg" alt="Работа">
<img src="img/img3.jpg" alt="Работа">
</div>
</div>
</section>
<section>
<div class="container"></div>
</section>
<footer>
<div class="container"></div>
</footer>
</body>
</html>
CSS:
Код:
body{
font-family: Arial, sans-serif;
margin: 0px;
padding: 0px;
color: #222222;
}
.clearfix:after{
content: '';
display: table;
width: 100%;;
clear: both;
}
div{
box-sizing: border-box;
}
header{
background: url(../img/first-bg.jpg) no-repeat center top / cover;
padding-bottom: 160px;
}
.container{
width: 930px;
margin: 0px auto;
}
.logo{
margin-top: 41px;
float: left;
}
nav{
float: right;
margin-top: 50px;
}
.menu{
padding: 0;
margin: 0;
display: block;
}
.menu li{
float: left;
display: block;
margin-right: 41px;
}
.menu a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.titles__first{
font-size: 40px;
color: #fff;
text-align: center;
margin-top: 180px;
}
h1{
font-size: 70px;
color: #fff;
text-align: center;
margin: 15px;
}
.button{
background: #fed136;
color: #484543;
border-radius: 3px;
display: block;
width: 240px;
padding: 20px 0;
margin: 0px auto;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-weight: bold;
font-size: 18px;
margin-top: 50px;
}
.title{
padding-top: 115px;
}
.title h2{
font-size: 40px;
font-weight: bold;
text-align: center;
text-transform: uppercase;
margin: 0;
}
.title p{
color: #777777;
text-align: center;
font-size: 16px;
margin-top: 5px;
}
.services{
margin-top: 50px;
}
.services__item{
width: 270px;
float: left;
text-align: center;
}
.services__item h3{
font-size: 18px;
margin-bottom: 5px;
}
.services p{
color: #777777;
font-size: 14px;
line-height: 1.55em;
}
.services__item:last-child {
float: right;
}
.services__item2 {
margin-left: 60px;
}
#portfolio{
background: #f7f7f7;
padding-bottom: 120px;
}
#services{
padding-bottom: 120px;
}
.woeks{
margin-top:
}
.works img{
float: left;
}
.works img:ntn-child(2){
margin-left: 29px;
}
.works img:last-child {
float: right;
}
Нужно выбрать второй элемент.
prntscr.com/hi0y23 
Простой
