Html 我的包装纸和书籍容器没有对齐，我如何使用flexbox解决这个问题？

基本上它只差几像素。我做了右边空白和右边填充，效果很好，但页面太远了。我要么希望它与包装器对齐，要么就在中间。p>

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;
}

div class=“bookContainer”>
标题
著者
页
阅读
霍比特人

作者：J.R.R.托尔金

295页

阅读

.书柜{
宽度：90%；
边框：2件纯黑；
保证金：自动；
}
.书{
显示器：flex；
证明内容：周围的空间；
}
.包装纸{
显示器：flex；
证明内容：周围的空间；
}

一种方法是将

flex:1

和

text align:center

添加到每个flexbox项目中

.bookContainer{
宽度：90%；
边框：2件纯黑；
保证金：自动；
}
.书{
显示器：flex；
证明内容：周围的空间；
}
.包装纸{
显示器：flex；
证明内容：周围的空间；
}
.项目{
弹性：1；
文本对齐：居中；
}

标题
著者
页
阅读
霍比特人

J.R.R.托尔金

295页
阅读

谢谢！愚蠢的问题，但为什么这样做。根据，

flex

是

flex-grow

、

flex-shorn

和

flex-basis

的缩写。只需键入

flex 1

就相当于键入

flex:1 10

，这使每个flexbox项的宽度相等。说明了所有“flex”属性各自的作用。