Getting DIV in flex-container to align space properly?

This is the code for my page:

body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
}

h1, h2, h3, h4, h5 {
font-family: Helvetica, Arial, sans-serif;
}
  
header {
display: block;
background-color: #B22222;
color: #FFFFFF;
padding: 30px;
margin: 20px;
}

div.sidebar {
display: table-row;
padding: 30px;
margin-left: 5px;
float:left;
width: 110px;
height: 400px;
background-color: yellow;
}

article {
display: block;
margin: 20px;
}


article.at1 {
    background-color: #FFFFFF;
    position: relative;
    margin-left: 200px;
    margin-right: 200px;
    top: 10px;
    border: 2px solid;
    border-radius: 12px;
    height: auto;
    width: 900px;
} 

.flex-container {
  display: flex;
}

.flex-container > div {
  margin: 10px;
  padding: 20px;
  font-size: 16px;
  align-content: space-around;
  margin-top: -10px;
}

.flex-container > div img {
width: 230px;
margin-left: -10px;
margin-top: 20px;
margin-bottom: 6px;
}

.flex-container > div:nth-child(2) {
margin-left: -20px;
}


.flex-container > div:nth-child(3) {
float: right;
display: table;
}

<body>
<header>
<h1>PREMIER CAR SALES</h1>
<h3>Great Western Road, Glasgow</h3>
<h2>Tel: 0141 496 0000</h2>
</header>

<div class="sidebar">
It works
</div>


<article class="at1">
<div class="flex-container">
  <div><img src="https://parkers-images.bauersecure.com/Scale/pagefiles/200868/cut-out/900x600/toyota_avensis_saloon.jpg"></div>
  <div><h3>2017 67 TOYOTA AVENSIS 1.8 VVT-i BUSINESS EDITION 4dr</h3>
  <p>blue, 28,000 miles </p></div>
  <div><h3>POA</h3></div>  
</div>
</article>

<article class="at1">
<div class="flex-container">
  <div><img src="https://i.imgur.com/ZiTeHos.jpg"></div>
  <div><h3>2016 66 ELDDIS AUTOQUEST 196 2.0 HDi</h3>
  <p>6 berth, 6 belted seats, 7.34m long, 2017 model year but produced in November 2016, white, There’s certainly seating for six – and more! The front settee will take two, with four more in the dinette around a wall-mounted table. Meanwhile, the rear lounge will accommodate another four (at least) and has a free-standing table plus a flip-up surface on the rear wall. There’s a television point and wall-mounting in the rear lounge’s front corner.>

Kitchen facilities include generous worktop space, three-burner gas hob and good-sized sink. Beneath are the separate oven and grill and 80-litre three-way fridge with removable freezer compartment. Four overhead lockers, four lower drawers and a pan store provide excellent storage.</p></div>
  <div><h3>£46,950</h3></div>  
</div>
</article>




<article class="at1">
<div class="flex-container">
  <div><img src="upload/6203342.jpg"></div>
  <div><h3>1998 S FORD</h3>
  <p>blue</p></div>
  <div><h3>POA</h3></div>  
</div>
</article>

</body>
</html>

The flex-container works; the main problem is the third tag in this page where the third div in isn't aligning with the other two as it should be; it's a bit too close to 1998 FORD in the example above.

I've tried doing margin-left and margin-right with various values of 20px, 40px etc. but it did not work.

Any help in trying to fix this flex-container part works; the template works quite well, apart from this small part.

Solution

I think the problem happens because the width size of the information product was not fixed. You only set the size for image. But information product and price follow width of the content.

Here I try to solve your problem. First, we need to put specific selector on information product with some class name. Do it the same way for price.

Second, you the style like you do to div img, but this time we will add for next div which is contain the information product and the price.

Third, an easy way copy paste the style properties for img as property for information product and price. Then, give fixed width for information product.

Here is the last two step.

Give 500px or you use some percentage for information product width value.
Give value auto for your price width.

Then, you will solve this problem.

Here is the code I made to solve your problem

Part of the HTML
————————————————
<div class="info">
     <h3>1998 S FORD</h3>
     <p>blue</p>
</div>
<div class="price">
      <h3>POA</h3>
</div>
————————————————


Part of CSS 
————————————————
.flex-container > div img {
    width: 230px;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}

.flex-container > div.info {
    width: 500px;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}

.flex-container > div.price {
    width: auto;
    margin-left: -10px;
    margin-top: 20px;
    margin-bottom: 6px;
}
————————————————