This is my first website on wordpress.org. I am not a programmer. Very green in this arena. I have a lot of respect for those of you who understand all this language.

Problem:
The child-theme style.css is not overriding the parent theme style.css. The website now shows a square box next to the text on the top toolbar. What do I need to do in the child theme to remove the square box?

Current Conditions/Code:

This is from the child-theme style.css

nav-main .menu-item-has-children > a:after, #nav-main

.page_item_has_children > a:after {
    font-family: "Geneva";
    padding-left: 4px;
    vertical-align: top;
}

This is from the parent style.css

nav-main .menu-item-has-children > a:after, #nav-main

.page_item_has_children > a:after {
    content: "";
    font-family: "Genericons";
    padding-left: 4px;
    vertical-align: top;
}

Research/Information:
Regarding ‘content’, the original line was (content: “f431”) and not the square box you see above.
According to phpxref.ftwr.co.uk/wordpress, it states
(.genericon-expand:before { content: ‘f431′; })
In addition, at the bottom of the genericons’ website it reads,
AN AUTOMATTIC PORTRAYAL & if I am not mistaken, that is the parent company to WordPress.org.
Further research has me think that this is in a widget.
The Square box shows next to the text on the top toolbar of the website. The font style did change to Geneva. What can I do to eliminate the box?
Thank you in advance for your answer.

Addendum:
This may be of importance, please note. When I removed a drop-down item in the ‘menu’ area of wordpress and made it a single ‘menu’ item the square box disappeared. The square box only shows on the ‘menu’ title that has a drop-down list of items. I searched in the style.css and found the following:

.sticky .entry-title:before {
   font-family: "Genericons";
    content: "f308";
    vertical-align: top;
    padding-right: 4px;
    display: inline-block;
}

Following the previous sample, I changed it to:

.sticky .entry-title:before {
    font-family: "Geneva" !important;
    padding-right: 4px !important;
    vertical-align: top !important;
    display: inline-block !important;
}

It did not work. The square remains. Suggestions?