How can we target the right most Child of Parent - html

Question

I have a parent container 'Streams' and it's Childs 'course' i what to set the margin-right: 10px to every child except the child appear at the rightmost of a parent
if I use '.course:nth-child(3n)' it works fine until the browser window is full when we zoom the page or window size change it didn't work properly.
.Streams {
width: 100%;
height: auto;
padding: 40px 60px 40px 60px;
display: flex;
flex-wrap: wrap;
}
.course {
width: 300px;
border: 1px solid black;
margin-right: 10px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>
to Fix this i use but this only effect the very last child.
.course:last-of-type{
margin-right:0px;
}

Answer 1

What you need to do is take a similar approach that Bootstrap does for its column implementations:
.Streams {
padding: 60px -5px;
...
}
.course {
...
margin: 0 5px;
}
If the distance between components you want is Xpx then
The formula is horizontal margin (x/2)px on the children, and horizontal padding -(x/2)px on parent.
.Streams {
width: 100%;
height: auto;
padding: 40px -5px;
display: flex;
flex-wrap: wrap;
}
.course {
width: 300px;
border: 1px solid black;
margin: 0 5px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>

Answer 2

You can use this code in (.course:last-child)
body {
margin: 0;
}
.Streams {
width: 100%;
height: auto;
padding: 40px 60px 40px 60px;
display: flex;
flex-wrap: wrap;
}
.Streams .course {
width: 300px;
border: 1px solid black;
margin-right: 10px;
margin-bottom: 5px;
}
.Streams .course:last-child {
margin-right: 0px;
}
<div class="Streams">
<div class="course">
<img src="#" alt="BCA" />
<p>
div 1
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 2
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 3
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
<div class="course">
<img src="#" alt="BCA" />
<p>
div 4
</p>
</div>
</div>