Trying to left-align text in flex containers with a flex rule - html

Question

I have a section that has a list of jokes where each joke is individually contained within divs. In each joke are two paragraphs that I'm trying to align to display at the left (start of the flex container). Right now the two main issues I'm facing is that the first paragraph (Q:) is not aligning to the very start of the container
I'm trying to align the paragraphs so that both the abbreviation and question wrap to leftmost boundary of the container's content.
The second issue I'm facing is that the second paragraph (A:) keeps centering itself in the container instead of displaying on the left side. I am not sure why the first paragraph does not center itself but the second paragraph does when displaying the webpage. I've been told that this can be achieved with a single flex rule which I've been trying to find in my div p ruleset.
Overall, I am trying to achieve this expected display:
HTML
<section id="jokes">
<h2>Out Of This World Joke Inventory!</h2>
<p>Hover over each joke to see the answer!</p>
<div id="joke-cards">
<div id="sun-joke">
<img src="img/icon1.png" alt="Icon of shooting star">
<hr>
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
<div id="tick-joke">
<img src="img/icon2.png" alt="Icon of rocket blasting off">
<hr>
<p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
</div>
<div id="restaurant-joke">
<img src="img/icon3.png" alt="Icon of flag on the Moon">
<hr>
<p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
</div>
</div>
</section>
CSS
#joke-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
#joke-cards div {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
height: 400px;
width: 300px;
background-color: #9B580D;
opacity: 80%;
padding: 20px;
}
#joke-cards div img {
height: 150px;
width: 150px;
}
hr {
width: 65%;
}
div p {
align-content: flex-start;
}
.abbrv {
font-size: 28px;
color: #E0DBD7;
}
.answer {
display: none;
font-size: 24px;
color: #191919;
}
#joke-cards div:hover .answer {
display: inline;
}

Answer 1

Use align-items: flex-start; for the divs, width + margin for img and text-align: left; for p
img{ width: 50%; outline: 1px solid blue; margin: 0 auto; }
#joke-cards {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-evenly;
}
#joke-cards div {
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: 15px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 15px;
height: 400px;
width: 300px;
background-color: #9B580D;
opacity: 80%;
padding: 20px;
}
#joke-cards div img {
height: 150px;
width: 150px;
}
hr {
width: 65%;
}
div p {
text-align: left;
}
.abbrv {
font-size: 28px;
color: #E0DBD7;
}
.answer {
display: none;
font-size: 24px;
color: #191919;
}
#joke-cards div:hover .answer {
display: inline;
}
<section id="jokes">
<h2>Out Of This World Joke Inventory!</h2>
<p>Hover over each joke to see the answer!</p>
<div id="joke-cards">
<div id="sun-joke">
<img src="img/icon1.png" alt="Icon of shooting star">
<hr>
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
<div id="tick-joke">
<img src="img/icon2.png" alt="Icon of rocket blasting off">
<hr>
<p><span class="abbrv">Q:</span> What do you call a tick on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">A luna-tick</span></p>
</div>
<div id="restaurant-joke">
<img src="img/icon3.png" alt="Icon of flag on the Moon">
<hr>
<p><span class="abbrv">Q:</span> Why did the people not like the restaurant on the moon?</p>
<p><span class="abbrv">A:</span> <span class="answer">Because there was no atmosphere.</span></p>
</div>
</div>
</section>

Answer 2

You have to wrap your paragraph tags into a container which will have place-items attribute and not each paragraph. Also, you need change display value from block to inherit for each content paragraph.
<div class="content">
<p><span class="abbrv">Q:</span> Why did the sun go to school?</p>
<p><span class="abbrv">A:</span> <span class="answer">To get brighter!</span></p>
</div>
div.content{
display: flex;
flex-direction: column;
width: 100%;
place-self: flex-start;
}
div.content p {
display:inherit;
}