I am very new to website development. Currently, I’m having trouble making CSS changes to a certain class="widget". I want this CSS to work.

The CSS is on my main.css file:

.widget {
  list-style-type:none;
  padding:0;
  margin:0;
}

This is part of my functions.php file:

// Load Stylesheets
function load_css()
{

    wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(), false, 'all');
    wp_enqueue_style('main');

}
add_action('wp_enqueue_scripts','load_css');


// Load Javascript
function load_js()
{
    wp_enqueue_script('jquery');
    wp_register_script('bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery', false, true);
    wp_enqueue_script('bootstrap');

}
add_action('wp_enqueue_scripts','load_js');

This is my page.php file:

<?php get_header();?>

<section class="page-wrap">
<div class="container">
    <section class="row">
    <div class="col-lg-3">
            <?php if( is_active_sidebar('page-sidebar')):?>
                <?php dynamic_sidebar('page-sidebar');?>
            <?php endif;?>
    </div>

    <div class="col-lg-9">
        <h1><?php the_title();?></h1>
        <?php if(has_post_thumbnail()):?>
            <img src="<?php the_post_thumbnail_url('blog-large');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail"> 
        <?php endif;?>
        <?php get_template_part('includes/section','content');?>
    </div>
    </section>
</div>
</section>

I feel like I just missed something, but as I said, I’m very new to WP website development so I don’t know where to look. Any help is very much appreciated. Thank you!