在Flexbox HTML CSS中控制内容的宽度

Question

我有一个flexbox，里面有图片和文字。由于某些原因，flexbox的很大区域无法放置内容。就像那里有padding一样，它不会让它越过它。我不太确定为什么内容不能在该区域中显示。

用黄色突出显示的部分是我不能放置任何东西的地方。如果它越过该区域，它将仅转到下一行。

我想让它扩展的原因是因为现在，文本看起来太靠近了。我该如何实现？

/*Header for picture, and description*/
#display {
    padding-top: 2em;
    border: solid .125em black;
    display: flex;
    flex-flow: wrap;
    background-color: white;
    opacity: 0.9;
}

#display > * {
    flex: 1 1 5%;
    padding: 1em;
}

article{
    margin-right:20em;
}

article h1{
    font-size: 2em;
    text-align: center;
}

article p{
    padding-top: 2em;
}

   <section id="display">
        <figure id="headshot">
            <img src="images/GM05.png" alt="headshot"/>
        </figure>
        <article>
            <h1>Name Goes Here</h1>
            <p>Cras tristique gravida tellus, id fringilla lorem pellentesque iaculis. Donec vitae risus mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc consectetur purus sed diam iaculis congue. Morbi vitae nisl est. Sed sed justo vitae risus porta commodo vestibulum eget est. Cras eu augue enim. Etiam at commodo tellus, at posuere ligula. Vivamus at dolor eget sem faucibus aliquet sed et diam. Mauris vel leo eget nulla pulvinar suscipit vitae eu sem. Quisque nisi nibh, aliquet sit amet urna non, commodo fringilla tellus. Nullam tincidunt est nec tellus laoreet, id mollis urna pulvinar. Donec ligula ipsum, ultrices in venenatis quis, ultricies ut enim. Vivamus porttitor lobortis dui, id aliquam ipsum imperdiet non.</p>
        </article>
    </section>

删除article标签中的margin-right可以解决此问题，但是现在它们没有正确对齐。

Answer 1

您必须注意，您已为文章设置了边距。

问题可能在这里：

article{
    margin-right:20em;
}

这会将article的20em推离display的右端。只需删除margin并运行代码即可。