Why the css in twenteenfourteen-child theme take no effect?

Question

I want to set margin-bottom:10px for article in http://104.223.65.117/wp/?s=emmet.

Method 1:

sudo cat /var/www/html/wp/wp-content/themes/twentyfourteen-child/style.css

*{
    font-family:"DejaVu Sans Mono" !important;
}
.site {
    max-width: 1920px;
}
.site::before{
    width:400px;
}
.site-header {
    max-width: 1920px;
}

.site-content header .entry-meta {
    max-width: 100%;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.site-content .navigation,
.comments-area,
.page-header,
.page-content {
    max-width: 70%;
}
#secondary ul li{
    color:black;
    width:360px;
    font-size:16px;
}

.entry-meta  .cat-links{
    display:none;
}

pre{
    font-family:inherit;
    font-size:16px;
    border:1px solid red;
}
article{
    margin-bottom:10px;
}

I have added the margin-bottom for artilce at the end of twentyfourteen-child/style.css file.

article{
    margin-bottom:10px;
}

Method 2: In the Customizing--Additional CSS

For both of them ,sudo service apache2 restart, it take no effect.

Answer 1

You need to use CSS selector .hentry instead of article. Read more about CSS specificity.

Answer 2

As you see in the console, the margin is determined by the hentry class and not the article. So, you should replace

article{
    margin-bottom:10px;
}

with

.hentry{
    margin-bottom:10px;
}