My wrapper and books container are not aligned, how do i go about fixing this using flexbox?

Question

Basically its just a bit off by a few px. I did margin right and padding right and it works, but pages would be to far off. I either want it aligning with the Wrapper or just in the middle of it.

div class="bookContainer">
<div class="wrapper">
<h2>Title</h2>
<h2>Author</h2>
<h2>Pages</h2>
<h2>Read</h2>
</div>
<div class="books"> 
    <p>The Hobbit</p>
    <p>by J.R.R. Tolkien</p>
    <p>295 pages</p>
    <p>Read</p>
</div>
</div>

.bookContainer{
width: 90%;
border:2px solid black;
margin: auto;
}
.books {
display: flex;
justify-content: space-around;

}
.wrapper {
display: flex;
justify-content: space-around;
}

Answer 1

One way of making this work is to add flex:1 and text-align:center to each of the flexbox items.

 .bookContainer{ width: 90%; border:2px solid black; margin: auto; } .books { display: flex; justify-content: space-around; } .wrapper { display: flex; justify-content: space-around; } .item { flex:1; text-align:center; } 

 <div class="bookContainer"> <div class="wrapper"> <h2 class="item">Title</h2> <h2 class="item">Author</h2> <h2 class="item">Pages</h2> <h2 class="item">Read</h2> </div> <div class="books"> <p class="item">The Hobbit</p> <p class="item">by JRR Tolkien</p> <p class="item">295 pages</p> <p class="item">Read</p> </div> </div>