Footer and non applying CSS query

Question

The present HTML and CSS are as follows:

 /* START footer CSS */ footer { position: relative; border-top: solid 1px rgba(255,255,255,.2); } /* Footernav-wrapper CSS ---------------------*/ #WebsiteFooterNav.Footernav-wrapper { display: flex; max-width: 1170px; flex-direction: column; padding: 20px 0; background-color: #000; margin: 0 auto; } /* END Footernav-wrapper CSS ---------------------*/ /* Footernav-svg-icons CSS ---------------------*/ #WebsiteFooterNav .Footernav-svg-icons { width: 0; height: 0; display: none; visibility: hidden; } /* END Footernav-svg-icons CSS ---------------------*/ /* Footernav CSS ---------------------*/ #WebsiteFooterNav .Footernav { width: 100%; max-width: 750px; margin: 0 auto; } /* END Footernav CSS ---------------------*/ /* Footernav-products CSS ---------------------*/ #WebsiteFooterNav .Footernav-menu+.Footernav-products { margin-top: 20px; border-top-width: 1px; } #WebsiteFooterNav.Footernav-wrapper ul { list-style: none; } #WebsiteFooterNav .Footernav-products { display: flex; min-height: 60px; margin: 20px; padding: 10px 0; border-style: solid; border-color: #333; border-width: 1px 0; align-items: center; justify-content: center; flex-wrap: wrap; } /* END Footernav-products CSS ---------------------*/ /* Footernav-product CSS ---------------------*/ #WebsiteFooterNav .Footernav-product { padding: 10px; /* END Footernav-product CSS ---------------------*/ /* Footernav-product-link CSS ---------------------*/ #WebsiteFooterNav .Footernav-wrapper a { text-decoration: none; } #WebsiteFooterNav .Footernav-product-link { display: flex; align-items: center; color: #999; fill: #999; font-size: 12px; transition: color .1s ease,fill .1s ease; } #WebsiteFooterNav .Footernav-product-link:hover { color: #fff; fill: #fff; } /* END Footernav-product-link CSS ---------------------*/ /* Footernav-product-icon CSS ---------------------*/ #WebsiteFooterNav .Footernav-product-icon { width: 20px; height: 20px; margin: 0 7px; } /* END Footernav-product-icon CSS ---------------------*/ /* Footernav-product-icon svg CSS ---------------------*/ #WebsiteFooterNav .Footernav-product-icon svg { max-width: 100%; max-height: 100%; display: block; fill: inherit; } /* END Footernav-product-icon svg CSS ---------------------*/ /* END Footernav-product-icon svg CSS ---------------------*/ /* Footernav-product-name CSS ---------------------*/ #WebsiteFooterNav .Footernav-product-name { display: flex; align-items: center; color: #999; fill: #999; font-size: 13px; transition: color .1s ease,fill .1s ease; } #WebsiteFooterNav .Footernav-product-name:hover { color: #fff; fill: #fff; } /* END Footernav-product-name CSS ---------------------*/ /* Footernav-misc CSS ---------------------*/ #WebsiteFooterNav .Footernav-misc { padding: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } /* END Footernav-misc CSS ---------------------*/ /* Footernav-region CSS ---------------------*/ #WebsiteFooterNav.Footernav-wrapper a{ text-decoration: none; } #WebsiteFooterNav .Footernav-region { padding: 5px 20px 0 0; display: flex; align-items: center; color: #999; fill: #999; font-size: 11px; line-height: 1; transition: color .1s ease,fill .1s ease; cursor: pointer; overflow: hidden; } /* END Footernav-region CSS ---------------------*/ /* Footernav-region-icon CSS ---------------------*/ #WebsiteFooterNav .Footernav-region-icon { width: 20px; height: 20px; margin-right: 10px; } /* END Footernav-region-icon CSS ---------------------*/ /* Footernav-region-icon svg CSS ---------------------*/ #WebsiteFooterNav .Footernav-region-icon svg { width: 100%; height: 100%; display: block; fill: inherit; } /* END Footernav-region-icon svg CSS ---------------------*/ /* Footernav-disclaimers CSS ---------------------*/ #WebsiteFooterNav.Footernav-wrapper ul { list-style: none; } #WebsiteFooterNav .Footernav-disclaimers { padding: 5px 0; margin: 0; display: flex; flex-wrap: wrap; font-size: 11px; color: #999; } /* Footernav-disclaimer CSS ---------------------*/ #WebsiteFooterNav .Footernav-disclaimer { padding: 5px 0; color: inherit; } /* END Footernav-disclaimer CSS ---------------------*/ /* Footernav-disclaimer:after CSS ---------------------*/ #WebsiteFooterNav .Footernav-disclaimer:after { margin: 0 8px; content: '/'; } /* END Footernav-disclaimer:after CSS ---------------------*/ /* Footernav-disclaimer:nth-last-child CSS ---------------------*/ #WebsiteFooterNav .Footernav-disclaimers .Footernav-disclaimer:nth-last-child(2):after { display: none; } /* END Footernav-disclaimer:nth-last-child CSS ---------------------*/ /* Footernav-disclaimer-link CSS ---------------------*/ #WebsiteFooterNav .Footernav-disclaimer-link { color: inherit; transition: color .1s ease,fill .1s ease; } /* END Footernav-disclaimer-link CSS ---------------------*/ /* END footer CSS */ 

 <!-- START footer HTML --> <div> <footer id="WebsiteFooterNav" class="Footernav-wrapper"> <svg class="Footernav-svg-icons" xmlns="http://www.w3.org/2000/svg"> <defs> <g id="Footernav-icon-github"> <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/> <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/> <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/> </g> <g id="Footernav-icon-archive"> <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/> <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/> <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/> </g> <g id="Footernav-icon-music"> <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/> <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/> <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/> </g> <g id="Footernav-icon-download"> <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/> <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/> <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/> </g> <g id="Footernav-icon-language"> <path stroke="null" id="svg_3" fill="#999999" d="m48.648036,36.176032c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609l0,4.84746c0,2.797967 -2.276371,5.074338 -5.074338,5.074338l-34.610226,0c-2.797967,0 -5.074338,-2.276371 -5.074338,-5.074338l0,-4.84746c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700684,0 -1.268609,0.568022 -1.268609,1.268609l0,4.84746c0,4.196999 3.414557,7.611556 7.611556,7.611556l34.610226,0c4.196999,0 7.611556,-3.414557 7.611556,-7.611556l0,-4.84746c0,-0.700587 -0.567925,-1.268609 -1.268609,-1.268609z"/> <path stroke="null" id="svg_6" fill="#999999" d="m40.945963,41.174354l-31.891973,0c-0.700489,0 -1.268609,0.56812 -1.268609,1.268609s0.567925,1.268609 1.268609,1.268609l31.891875,0c0.700684,0 1.268609,-0.567925 1.268609,-1.268609c0,-0.700489 -0.567925,-1.268609 -1.268511,-1.268609z"/> <path id="svg_9" fill="#999999" d="m37.839749,23.326817c-0.466701,-0.522374 -1.268609,-0.567828 -1.791275,-0.101029l-9.779987,8.736893l0,-24.58662c0,-0.700489 -0.567925,-1.268609 -1.268609,-1.268609c-0.700489,0 -1.268609,0.567925 -1.268609,1.268609l0,24.58662l-9.779987,-8.736796c-0.522374,-0.466798 -1.324379,-0.421247 -1.791275,0.101029c-0.466604,0.522569 -0.421539,1.324574 0.100932,1.791275l10.625986,9.492375c0.602185,0.538142 1.357374,0.807066 2.112856,0.807066c0.755189,0 1.510476,-0.268925 2.112856,-0.806774l10.625986,-9.492667c0.522666,-0.466993 0.567828,-1.268998 0.101127,-1.791372z"/> </g> </defs> </svg> <div class="Footernav"> <ul class="Footernav-products"> <li class="Footernav-product" id="xxxxxxxx"> <a href="LINK HERE" class="Footernav-product-link"> <span class="Footernav-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#Footernav-icon-github"></use> </svg> </span> <span class="Footernav-product-name">Product 1</span> </a> </li> <li class="Footernav-product" id="xxxxxxxx"> <a href="LINK HERE" class="Footernav-product-link"> <span class="Footernav-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#Footernav-icon-archive"></use> </svg> </span> <span class="Footernav-product-name">Product 2</span> </a> </li> <li class="Footernav-product" id="xxxxxxxx"> <a href="LINK HERE" class="Footernav-product-link"> <span class="Footernav-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#Footernav-icon-music"></use> </svg> </span> <span class="Footernav-product-name">Product 3</span> </a> </li> <li class="Footernav-product" id="xxxxxxxx"> <a href="LINK HERE" class="Footernav-product-link"> <span class="Footernav-product-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#Footernav-icon-download"></use> </svg> </span> <span class="Footernav-product-name">Product 4</span> </a> </li> </ul> <!-- if "is-small" is set on page config, return only Footernav-misc--> <div class="Footernav-misc"> <a href="#" class="Footernav-region"> <div class="Footernav-region-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" focusable="false"> <use xlink:href="#Footernav-icon-language"></use> </svg> </div> <div class="Footernav-region-text">Change Language</div> </a> <ul class="Footernav-disclaimers"> <li class="Footernav-disclaimer">Copyright © 2017 -websitename-. All rights reserved. </li> <li class="Footernav-disclaimer" id="Globalnav.copyright.Privacy"> <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Privacy</a> </li> <li class="Footernav-disclaimer" id="Globalnav.copyright.Terms_of_Use"> <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Terms of Use</a> </li> <li class="Footernav-disclaimer" id="Globalnav.copyright.Cookies"> <a href="LINK HERE" class="Footernav-disclaimer-link" target="_self">Cookies</a> </li> </ul> </div> </div> </footer> </div> 

The objective mockup https://i.stack.imgur.com/tJhbk.png (Navigation columns have been pruned)

1. "Product" link inline SVG's are not conforming to their specified 20px boundary dimensions
2. Inheritance issues in regards to "Product" links and the related style css.
3. Incorrect Language SVG size

#WebsiteFooterNav .Footernav-product-link {} and the CSS within not applying is where the issue lies I do believe, however unaware of as to the reason.

If another poster may shed some light

Answer 1

You are missing a closing brace in your CSS.

/* Footernav-product CSS ---------------------*/

#WebsiteFooterNav .Footernav-product {
    padding: 10px;

/* END Footernav-product CSS ---------------------*/

If you insert the missing brace, your CSS works a lot better.