Question: I have the `div.wrapper` with the `div.items` using `display:inline-block`

I want to add padding to them but I also want the items to stick to the left and right product. 

How to do this with responsive?

here is my HTML

```
    <div class="wrapper">
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
        <div class="items">123</div>
    </div>

```

Here is the layout i want:

[![](https://i.stack.imgur.com/QxNyF.png)](https://i.stack.imgur.com/QxNyF.png)

Answer: 
also you can use `display: flex`
and for responsive use `flex: 0 0 200px/*this is for example*/;`

```css
.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  border:1px solid #000;
}

.wrapper>div {
  width: 30%;
  flex: 0 0 200px;
  height: 100px;
  outline: 1px solid red;
  margin: 20px;
}
```

```html
<div class="wrapper">
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
  <div class="items">123</div>
</div>
```
Make the changes accordingly , hope this will solve your problem

```
display : flex
flex-direction:row;
justify-contents:space-around

```