It’s because you added this CSS to your child theme:
#primary {
width: 780px;
margin-right: 10px;
}
And you didn’t add any media queries that change the width of the primary (main) container when the screen resizes.
For example, if you look a the original theme’s style.css file, way towards the bottom you’ll see this section:
@media (max-width: 1020px) {
#page {
width: 900px;
}
#primary {
width: 620px;
}
.expound-full-width #primary {
width: 900px;
}
.single .site-content .related-content article {
width: 180px;
}
}
When you see a section that begins @media, that’s a media query, which gives a site its responsiveness. In this example, the (max-width: 1020px) means that the rules in this section come into effect when the screen width goes below 1020px. You can see that in this section, the width of #primary adjusts down to 620px. If you examine the parent theme’s style.css file further, you’ll see media query sections for 960px, 900px, 700px, and 600px, although the width of #primary gets set to 100% in the 900px section and doesn’t change after that.
That’s what you are missing in your child theme, media queries that define what the width of different page elements should be based on the width of the screen. So try copying in the media query sections from the parent into your child style.css file, at least the rules for #primary since that’s the selector that you’ve overridden in your child theme, and make the adjustments you need to the width of #primary.
