Selecting Child elements css - html

Question

hey so im doing something for a Webdesign class I'm taking. I'm trying to select these <h2>'s inside element <divclass=left> but It's not working for me.
nav {
display: flex;
flex-direction: row;
height: 75px;
background-color: rebeccapurple;
color: white;
justify-content: space-between;
}
.left h2{margin-left: 20px}
.right{
}
body{padding:0; margin: 0}
.boxs {
display: flex
}
.boxs>* {
padding: 5px;
height: 200px;
border: black solid 2px;
box-sizing: border
}
<nav>
<nav>
<div class=left></div> <i class="fas fa-ad"></i>
<h2>Home</h2>
<h2>Browser</h2>
<h2>Download</h2>
<h2>Contact us</h2>
</nav>
<div class="right"><h2>Sign-in</h2></div>
</nav>

Answer 1

Your div with the class left is not wrapping anything. Your HTML should look like this if you want the CSS .left h2 to work.
.left h2{margin-left: 20px}
<nav>
<nav>
<div class="left"> <i class="fas fa-ad"></i>
<h2>Home</h2>
<h2>Browser</h2>
<h2>Download</h2>
<h2>Contact us</h2>
</div>
</nav>
<div class="right">
<h2>Sign-in</h2>
</div>
</nav>

Answer 2

You can try this if you want to select h2 elements:
nav h2 {
color: red;
}