I'm trying to create my first child inside the div.missions, but it's not displaying. The only thing showing is the background color of the second child. Can someone assist me with this issue?
Let me share my code with you:
Here's my HTML:
<div class="mission">
<div> <h2> Our Goal </h2> </div>
<div> <p> At Summit, we aim to make mathematics understandable for everyone. It's a challenging subject for many, and we want to help people solve problems, whether they're simple or complex. Our mission is to spread knowledge to all. </p> </div>
</div>
And here's a snippet of my CSS:
.mission{
margin-top: 50px;
display: grid;
grid-template-columns: 40% 60%;
}
.mission div:nth-child(1){
background-image: url("MountainImage3.jpg");
background-size: contain;
}
.mission div:nth-child(2){
background-color: #48cae4;
padding-top: 100px; padding-bottom: 100px;
}
Any help would be greatly appreciated. Thanks!