При обычном экране блоки по центру с равным расстоянием, но при уменьшении жмутся к левому краю
#works{
position: absolute;
width: 100%;
height: 700px;
background-color: #fbfaf8;
margin-top: 100px
}
.portfolio{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 30px;
}
.portfolio ul,
.portfolio li{
margin: 0;
padding: 0;
list-style-type: none;
}
.portfolio li{
display: inline-block;
width: 300px;
position: relative;
overflow: hidden;
}
.portfolio img{
max-width: 100%;
display: block;
}
.descr{
position: absolute;
left: 0;
width: 100%;
height: 145px;
background-color: rgba(0, 0, 0, .5);
color: white;
padding-top: 80px;
text-align: center;
opacity: 0;
top: 100%;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.portfolio li:hover .descr{
opacity: 1;
top: 0px;
}
<section id="works">
<h1>Примеры работ</h1>
<div class="portfolio">
<ul>
<li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
<li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
<li><span class="descr">Описание</span><img src="http://www.zastavki.com/pictures/1366x768/2005/Animals_Cats__001795_1.jpg" alt="alt"></li>
</ul>
</section>