:nth-child selects more elements than expected [duplicate] - css

Question

This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 3 years ago.
I have a html page with only one div that has a particular class:
<div class="article-page__wrapper article-page__article-content article-page--has-main-img">
Here is my selector which should only pick out one element under that div due to the nth-child attribute being 1.
.article-page__article-content :nth-child(1) {
background-color: red;
}
However, this is selecting numerous divs to give a red background.
Can anyone say why? Thanks!
Here's a sample of more html on the page, beneath the div with class article-page__article-content, where different divs have been reddened.
<div class="article-page__wrapper article-page__article-content article-page--has-main-img">
<div class="article-page__main-img-container">
<figure>
<img alt="2018." class="header-image" height="504" src="/media/images/30971178767_6a71936765_k.max-760x504.jpg" width="756">
<figcaption>
<div class="rich-text">wall, 2018.</div> | <div class="rich-text">Protection</div>
</figcaption>
</figure>
</div>
<div class="article-page__left-sidebar">
<div class="sidebar sidebar--share-article">
<h1 class="sidebar__heading">Share this</h1>
<ul class="sidebar__share-options-list">
<li>
<div class="icon-container">
<a href="https://twitter.com/intent/tweet?text=handout&url=http%3A//0.0.0.0%3A5000/en/handout/" aria-haspopup="false">
<svg role="img" class="icon icon-twitter" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share on Twitter</title>
<use xlink:href="#icon-twitter" class="icon-style"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="https://www.facebook.com/sharer.php?u=http%3A//0.0.0.0%3A5000/en/handout/" data-service="facebook" aria-haspopup="false">
<svg role="img" class="icon icon-facebook" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share on Facebook</title>
<use xlink:href="#icon-facebook"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="https://wa.me/?text=http%3A//0.0.0.0%3A5000/en/handout/?source=wa&medium=ar" data-service="whatsapp" aria-haspopup="false">
<svg role="img" class="icon icon-whatsapp" viewBox="-8 -8 50 50"" width="50px" height="50px">
<title>Share on WhatsApp</title>
<use xlink:href="#icon-whatsapp"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="mailto:?&subject=handout&body=http%3A//0.0.0.0%3A5000/en/handout/" aria-haspopup="false">
<svg role="img" class="icon icon-email" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share via email</title>
<use xlink:href="#icon-email"></use>
</svg>
</a>
</div>
</li>
<li>
<div class="icon-container">
<a href="#" class="share-link" aria-haspopup="false">
<svg role="img" class="icon icon-link" viewBox="0 0 50 50" width="50px" height="50px">
<title>Share link</title>
<use xlink:href="#icon-link"></use>
</svg>
</a>
</div>
</li>
</ul>
<span class="confirmation-text">URL copied to clipboard</span>
</div>
</div>
<div class="article-page__right-sidebar">
<div class="sidebar sidebar--newsletter">
<h1 class="sidebar__heading">Read more!</h1>
<p>Get our weekly email</p>
<div class="sidebar__form-container">
<form method="post" class="mailing-list__form" id="newsletter-signup" action="/api/newsetter-subscribe/">
<input type="hidden" name="list_id" value="17" id="newsletter-list_id">
<div class="single textinput sidebar__fieldset">
<label for="newsletter-email" class="is-required invisible-content">Enter your email address</label>
<input class="sidebar--newsletter__input" type="email" placeholder="Email address" name="newsletter-email" id="newsletter-email" />
<input class="sidebar--newsletter__input" type="text" placeholder="First name" name="newsletter-first-name" id="newsletter-first-name" />
<input class="sidebar--newsletter__input" type="text" placeholder="Last name" name="newsletter-last-name" id="newsletter-last-name" />
</div>
<div class="buttons sidebar__fieldset">
<button type="submit" class="btn">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="article-page__rich-text">
<div class="rich-text"><p>Devil detail goes right here.</p><p>Have it love it get it right.</p><p></p><p>Good! Great.</p></div>
</div>
<div class="article-page__rich-text">
<div class="rich-text"><p>More text here.</p><p>Have it love it get it right.</p><p></p><p>Good! Great.</p></div>
</div>