Only some classes in my CSS file are being read and used-CodePudding

I'm working on a theme for WordPress and trying to make some functionality changes, however, it seems like some CSS classes are not using the style outlined in my code while others are.

HTML & PHP Code

<div ><!-- Div Class 1, Not being read --><?php
        
        woocommerce_quantity_input(
            array(
                'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
                'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
                'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
            )
        );
        
        do_action( 'woocommerce_after_add_to_cart_quantity' );
        ?>
            
        
        <div > <!-- Div Class 2, Being read -->
            
            <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" ><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        </div>  <!-- CUSTOM LINE -->
        </div> <!-- CUSTOM LINE -->

CSS Code:

.quantityContainer{
    display: flex !important;
}

.quantity{
    float: left;
}

.flex-grow-1{
    flex-grow: 1 !important;
}

The problem is that both the .quantity and .flex-grow-1 classes are being effected by the style but the .quantityContainer class isn't.

I've attached some images to show the Chrome Dev Tools code.

Flex Grow Class with CSS

Quantity Class with CSS

Quantity Container class without CSS

Page URL: https://toolsandmachinery.co.uk/product/scan-combiflex-330/

I've tried:

Changing Class Names
Changing from Class to ID Changing
Changing CSS code location (to master style.css)

Thanks a lot.

CodePudding user response：

I think, but I'm not 100% certain, that your problem is with your attempt at a CSS comment:

// Styling to make quantity field and button inline
.quantityContainer{
    display: flex !important;
}

CSS doesn't support this type of commenting, you must use /* ... */ syntax instead. I think for whatever reason this is invalidating the next line which is the one you say isn't being applied.

Correct way:

/* Styling to make quantity field and button inline */
.quantityContainer{
    display: flex !important;
}