Here is my code snippet:
div {
justify-content: center;
display: flex;
}<div id="unknowing">
<img src="" height="200" width="350">
</div>
<div id="house">
<h1>Ancient Rome</h1>
</div>
<div id="puzzle">
<p>Ancient Rome was a great civilization, that along with Ancient Greece, contributed to many things in the modern world, like architecture, numbers, letters, and government.</p>
</div>I am facing an issue where only "Ancient Rome" shows below the image instead of the heading and paragraph being next to the image in the center. I attempted to make the image display inline, but it shifted to the left, and using float did not produce the desired result.