Wordpress - 父主题覆盖儿童样式

Question

I'm building a site on Wordpress using html5blank theme as a parent for first time. The majority of my style rules in the child theme are working as they should but a few aren't and I can't work out why this is the case. I've built the front-end beforehand so I know the code works in the browser. For the front-end I used reset.css and skeleton.css for my grid. I haven't transferred over the reset file as the parent theme uses normalize.css. Do I need a standalone file for my skeleton grid or can it all go into the style.css (which is what I've done) ?

For example, this is how the top of the home page should look -

And this is how it looks in Wordpress -

Why would certain styles apply and others not? Other than style.css and functions.php are there any other parent theme files that could influence the styling rules which I need to recreate in the child to override this? Appreciate any assistance.

UPDATE

Looking in the developer tools it is these styles from the child which are being overridden by the parent (they're struck through in developer tools)

.container {
    margin: auto;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
}

.showreel {
  height: 50px;
  max-width: 100%;
  position: absolute;
  background-color: black;
  bottom: 0;
  padding: 0 30px;
  justify-content: space-between;
}

.showreel, .showreel > div.seemore {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex:1;
}
.showreel, .showreel > div.seeour {
    justify-content: flex-end;
    flex:1;
    display: flex;
    align-items: center;
}

Answer 1

Your question is quite broad, and it is hard to give direction without having a verifiable example in front of me.

Unfortunately, due to the nature of your problem, I am not sure if you will be able to give me a verifiable example so I am going to go ahead and point out the most obvious solution.

Generally, in cases like this, the problem is born from Specificity in your CSS rules.

Where you parent CSS file may initiate a rule like this:

.menu > ul > li a { /* four selectors */
    color: #00ff00;
}

And you have a rule in your child-theme stylesheet that looks like this:

.menu li a { /* three selectors */
    color: red;
}

In cases like this, your parent stylesheets rule will override your child stylesheets rule.

The easiest way to check for this is to inspect the element in your browser and see how many rules are applying to your element. Generally, when a specific rule is being overridden from another place, it will have a strikethrough style in your element inspector.

You can solve this by either:

1. being more specific with your property declaration, or
2. using the !important tag in your CSS