Having trouble getting WP Customizer Color Picker to actually change colors on my site

I'm busy developing my first custom theme on WordPress. I have converted and created all the files and everything is working as it should. The original files are based on Bootstrap, but I have converted the stylesheets to not be dependant. I am finally at a place where I want to allow users some customization and among other things, would like to add the ability to change theme colors.

I created a separate customize.php file that handles my customizer code. I have also added the WP Color Picker component and it does show up in the WP dashboard > Appearance > Customize window. The problem is that it doesn't actually work...

As part of my testing, to ensure that Bootstrap wasn't affecting anything, I created a div and gave it a custom class name (one that isn't found anywhere else on the website), I gave the div some height and width, and inside, I added a p-tag just to have some content. What I would like to do, is create a section (in the customizer) that will allow users to change the background color of the div

In the customize.php file:

<?php
function myTheme_customize_register($wp_customize){   
    $wp_customize->add_section('colors', array(       
        'title' => __('Colors', 'myTheme'),
        'priority' => 30
    ));

    $wp_customize->add_setting('bg_color', array(      
        'default' => '#f0a709',
        'transport' => 'postMessage',                     // I have also tried 'refresh'    
    ));

    $wp_customize->add_control( new WP_Customize_Color_Control ($wp_customize, 'bg_color', array(
        'label' => __('Background Color', 'myTheme'),
        'section' => 'colors',
        'settings' => 'bg_color',                        
    ))); 
}
add_action('customize_register', 'myTheme_customize_register');

In my functions.php:

<?php
function myTheme_customize_css(){ ?>                              
    <style type="text/css">
        .hi{
            background-color: <?php echo get_theme_mod('bg_color', '#f0a709'); ?> !important;
        }
    </style>
<?php 
}
add_action('wp-head', 'myTheme_customize_css');
require get_template_directory().'/inc/customize.php';
?>  

In the Customizer, the section 'Colors' is available and also the Color Picker, but selecting another color does nothing. The option for additional CSS is also available, and to test, when selecting the div and giving it a custom bg-color, the color does indeed change. I have also created another section of code in the customizer.php which handles some custom footer settings, things like heading text and button customization, and that's working just fine. I have a feeling the solution is really simple but I'm just not seeing it. Any help would be greatly appreciated.

The action will be like this :

add_action('wp_head', 'myTheme_customize_css');

You write the action name wrong. It will work as expected.