Changing the padding of content in a Flexbox HTML - html

Question

The issue I'm having is that I'm trying to change the layout between min-width:975px max-width: 1280px. I want to move the image and the text around.
In the picture, you can see the text is too much to the left. I want to move it closer to the image. This is inside of a flexbox. I tried to use padding, but nothing changed.
How would I move the text closer to the image?
/*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 h1{
font-size: 2em;
}
article p{
padding-top: 2em;
}
#media screen and (min-width:975px max-width: 1280px){
article{
}
}
<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>

Answer 1

Why do you set flex: 1 1 5%; to the flex-child ?
It is the shorthand for
flex-grow:1;
flex-shrink:1;
flex-basis:5%;
while flex-basis is
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
flex-basis
This defines the default size of an element before the remaining space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or a keyword. The auto keyword means "look at my width or height property" (which was temporarily done by the main-size keyword until deprecated). The content keyword means "size it based on the item's content" - this keyword isn't well supported yet, so it's hard to test and harder to know what its brethren max-content, min-content, and fit-content do.
If you set flex:1; to article, it should work fine, else, use the values you need (flex: X X X;), read the tutorials to go further.
/*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>* {
padding: 1em;
}
article {
flex: 1;
}
article h1 {
font-size: 2em;
}
article p {
padding-top: 2em;
}
#media screen and (min-width:975px max-width: 1280px) {
article {}
}
<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>