CSS classes not getting applied to html code in wordpress

Do not edit the theme itself. First create a child theme for your changes. Or create a new standalone theme

Please post a link to your site; it is impossible to offer suggestions otherwise.

@crouchingbruin please find the link https://shoppersdesign.com/

@esmi
I tried creating child theme after refering to the link which you had provided but no luck.having same particular problem where my header.php code get loaded but css classes are not getting applied to it.

I have even checked the whether my css classes are loaded properly or not
but after inspecting i came to know it is loaded properly.

so issue is still there.

I see your child theme’s style.css file being read in. Can you give me a specific example of a CSS rule in there which you do not think is being used? For example, I see rules for a footer class, but I don’t see any elements on your home page that have a class of footer.

Actually it not getting applied to whole header section
<div class=”header-section”>

OK, the main problem that you have right now is that you have a CSS file called print.css in your CSS folder that is hiding major portions of your page with this rule:

.header-container,
.footer-before-container,
.footer-container,
.widget,
.pager,
.toolbar,
.actions,
.buttons-set { display:none !important; }

This rule is fine, because you normally want to hide all of those elements when printing. The problem is that you need to enclose everything inside that file within something called a media query so that it’s in effect only when printing, and not when it’s being viewed on the screen.

So edit your print.css file so it looks like this:

/**

 */
@media print {
*     { /* background:none !important; */ text-align:left !important; }
body  { background:#fff !important; font-size:9pt !important; margin:15px !important; }

.header-container,
.footer-before-container,
.footer-container,
.widget,
.pager,
.toolbar,
.actions,
.buttons-set { display:none !important; }

.page-print .data-table .cart-tax-total { background-position:100% -54px; }
.page-print .data-table .cart-tax-info { display:block !important; }
}

So what I did was add a line at the top that reads @media print { and then a closing right brace } at the very end, so these rules will only be in effect when printing. Once you do that, you’ll find that everything that’s missing will appear on your screen.

Thanks Master.
please keep up the good work.
Thanks once again.