У меня есть 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>
Удаление поля margin-right в теге article устраняет проблему, но теперь они не выровнены правильно.
