I am facing an issue with my flexbox where I cannot align the p elements inside the "newDog" div. My goal is to have them all left-aligned so that they can be neatly stacked underneath the dl contents.
See below for the code snippet:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
body{
background-color: rgb(255, 222, 176);
}
#newDog{
display: flex;
background-color: antiquewhite;
flex-wrap: wrap;
}
#newDog img{
float: left;
margin: 10px 10px 10px 10px;
clear: both
}
#newDog dl{
font-family: 'Montserrat', sans-serif;
position: relative;
align-self: flex-start;
margin-top: 5em;
}
#newDog p{
font-family: 'Montserrat', sans-serif;
font-weight: 600;
position: inherit;
align-self: flex-start;
vertical-align: baseline;
}<body>
<header>
<img src="https://i.imgur.com/zk3.png" alt="Aussies R Us" title="Aussies R Us">
<h1>⚞ Our Aussies ⚟</h1>
</header>
<nav>
<a href="index.html">Home</a> ┃
<a href="ouraussies.html">Our Aussies</a> ┃
<a href="faq.html">FAQ</a> ┃
<a href="contactus.html">Contact Us</a> ┃
</nav>
<main>
<div id="newDog">
<img src="https://i.imgur.com/R3l8.jpg" width="500" height="500" alt="Max" title="Max">
<dl>
<dd>Name: Max</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Standard Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 20-25 inches</dd>
<dd>Weight: 50-60 lbs</dd>
<dd>Age: 1-2 Years old</dd>
<dd>Activity Level: Medium - High</dd>
</dl>
<p>
Meet Max! He is a great young Australian Shepherd, he is a very smart dog, and learns quickly. <br>
Max loves to be around people, even though he is not a very good lap dog, he never <br>
wants to be left out of the fun, and will stick around wherever there is people. Max <br>
loves other animals, small and big. He is very gentle when being introduced to other <br>
animals, and tends to watch after his smaller brothers.
</p>
</div>
<br>
<div id="newDog">
<img src="https://i.imgur.com/o2Kp.jpg" width="500" height="500" alt="Odyn" title="Odyn">
<dl>
<dd>Name: Odyn</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Mini Australian Shepherd</dd>
<dd>Gender: Male</dd>
<dd>Height: 14-18 inches</dd>
<dd>Weight: 15-25 lbs</dd>
<dd>Age: 4-5 Months old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Odyn! He is a young pup that is looking to find a good lap to lay on and sleep! <br>
Odyn loves to play with his brothers Max and Jack Jack, but he also loves a good nap. <br>
If you are looking for a pup to laydown and watch a show with, Odyn is the pup for you!
</p>
</div>
<br>
<div id="newDog">
<img src="https://i.imgur.com/MWy.jpg" width="500" height="500" alt="Jack Jack" title="Jack Jack">
<dl>
<dd>Name: Jack Jack</dd>
<dd>Availablility: Not Available</dd>
<dd>Breed: Yorkie</dd>
<dd>Gender: Male</dd>
<dd>Height: 7-9 inches</dd>
<dd>Weight: 14-18 lbs</dd>
<dd>Age: 3-4 Years old</dd>
<dd>Activity Level: Low - Medium</dd>
</dl>
<p>
Meet Jack Jack! He isn't exactly an Aussie pup, but he is a cute guy nonetheless. Jack <br>
loves to chill out and sit on someones lap even more than his brother Odyn. Don't let <br>
that fool you though, when Jack wants to play, he plays! Jack Jack, loves to wrestle <br>
with his cat friend Meep. Sometimes he wins, sometimes Meep wins, its a never ending battle!
</p>
</div>
</main>
<footer>© 20 R Us</footer>
</body>