How to set the same distance between pictures using flexs as shown in the screenshot
@font-face { font-family: 'Brich Std'; src: url('fonts/BirchStd.otf') format('truetype'); font-weight: 300; } @font-face { font-family: 'Italic'; src: url('fonts/Italic.ttf') format('truetype'); font-weight: 300; } *, *:before, *:after { box-sizing: border-box; } body{ background: url("img/background.png"); margin: 0; } a{ text-decoration: none; } ul{ list-style: none; } .main{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .main span{ font-weight: bold; } .header{ margin-top: 35px; display: flex; justify-content: space-between; position: relative; width: 76%; } /*Search form*/ .search img{ position: relative; top: 3px; left: -3px; } .search-form { display: inline-block; position: relative; } .search-form-input { width: 230px; height: 35px; line-height: 28px; margin: 0; padding: 0 38px 0 10px; border: 1px solid #d5d5d5; border-radius: 0; background-color: white; box-sizing: border-box; font-family: Time New Roman, sans-serif; font-size: 13px; border-radius: 4px; } .search-form-btn { /* Позиционирование относительно <form> */ position: absolute; right: 2px; /* 2px - размер border'а поля формы */ top: 2px; width: 28px; height: 28px; line-height: 28px; /* Просто тюнинг внешнего вида */ color: #666; font-weight: bold; margin: 0; padding: 0; border: 0; border-radius: 0; background-color: transparent; text-align: center; cursor: pointer; } .search span{ font-weight: bold; padding-right: 10px; } .search img{ width: 90%; } /*End search form*/ /*joing*/ .join{ display: flex; align-items: center; } .join span{ padding-right: 10px; } /* End join*/ /*Menu*/ .menu{ display: flex; } .menu .logo{ margin-top: -60px; } .menu .left, .right{ margin-top: 37px; } /*Menu Left*/ .menu-left{ display: flex; margin-left: -105px; } .menu-left li{ padding-left: 110px; margin-top: -63px; font-family: 'Brich Std'; font-size: 19pt; } .menu-left ul{ } .menu-left a:visited{ color: #404040; } .menu-left a:hover{ color: #b0353f; } /*End Menu Left*/ /*Menu Right*/ .menu-right{ display: flex; margin-left: -60px; } .menu-right li{ padding-left: 110px; margin-top: -63px; font-family: 'Brich Std'; font-size: 19pt; } .menu-right ul{ } .menu-right a:visited{ color: #404040; } .menu-right a:hover{ color: #b0353f; } /*End Menu Right*/ /*End Menu*/ /*Portfolio*/ .portfolio{ margin-top: -55px; } .portfolio h1{ color: #404040; font-size: 110pt; font-family: 'Brich Std'; font-weight: 100; } .portfolio p{ color: #8b8b8b; font-size: 13pt; font-family: 'Italic'; font-weight: bold; margin-top: -90px; margin-left: 40px; } .portfolio span{ position: relative; left: 188px; } /*Button*/ .button1{ margin-top: 30px; margin-left: 450px; } a.button { font-weight: 100; font-family: 'Brich Std'; font-size: 30pt; text-transform: uppercase; color: white; text-decoration: none; padding: .2em 0.7em calc(.1em + 1px); border-radius: 7px; background: #af2330; box-shadow: 0 -3px #981e2a inset; transition: 0.2s; } /*End Button*/ /*End Portfolio*/ /*Slider*/ .slide1 { display: flex; flex-direction: row; justify-content: space-around; } /*End Slider*/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Design Group</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> </head> <body> <div class="main"> <div class="header"> <div class="search"> <span>Search: </span> <form action="#" class="search-form"> <input type="search" class="search-form-input" placeholder="" /> <button type="submit" class="search-form-btn"> <!-- Сюда можно запихнуть любую картинку на свой вкус --> <img src="img/Search.png" alt=""> </button> </form> </div> <div class="join"> <span>Join Us: </span> <a href=""><img src="img/Facebook.png" alt=""></a> <a href=""><img src="img/Twitter.png" alt=""></a> <a href=""><img src="img/Wifi.png" alt=""></a> <a href=""><img src="img/Mail.png" alt=""></a> </div> </div> <div class="menu"> <div class="left"> <img src="img/Left.png" alt=""> <ul class="menu-left"> <a href=""><li>Home</li></a> <a href=""><li>About Us</li></a> <a href=""><li>Our Services</li></a> </ul> </div> <div class="logo"> <a href="#"><img src="img/Logo.png" alt=""></a> </div> <div class="right"> <img src="img/Right.png" alt=""> <ul class="menu-right"> <a href=""><li>Portfolio</li></a> <a href=""><li>Blog</li></a> <a href=""><li>Contact Us</li></a> </ul> </div> </div> <div class="portfolio"> <h1>We Do More Than Just Websotes!</h1> <p>Mauris accumsan nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venenatis.<br> <span>In pede mi, aliquet sit amet, euismod in,auctor ut, ligula.</span> </p> <div class="button1"><a href="#" class="button">See Our Portfolio</a></div> </div> <div class="slider"> <div class="slide1"> <div class="sl_slide"><img src="https://cdn1.savepice.ru/uploads/2017/10/29/0d04b61b194ff2fcd6c59c041dc9d057-full.png" alt=""></div> <div class="sl_slide"><img src="https://cdn1.savepice.ru/uploads/2017/10/29/4bdb0c76650288fd156e85daffa8935b-full.png" alt=""></div> <div class="sl_slide"><img src="https://cdn1.savepice.ru/uploads/2017/10/29/511326b5eb7e3a20479f5a3c51ea6321-full.png" alt=""></div> <div class="sl_slide"><img src="https://cdn1.savepice.ru/uploads/2017/10/29/897aacd0b42a3ccfcd6e5d6be0d54e29-full.png" alt=""></div> </div> </div> 
