bootstrap now has borders around in wordpress

Question

I have enqueued all scripts properly and it shows no errors in my console log. The issue I have is that my "navbar" is now out of wack and my rounded "fa icons" are now square instead of round. I'm putting a custom template ive made into Wordpress and im not using any Wordpress plugins. how do i override the wordpress changes it made to my navbar and icons? is there a way to manually change it in css? also i have boarders around and think maybe it (Wordpress) also changes the bootstrap settings maybe? looking at it again i think its my bootstrap because i have icons just no rounded circle. also there are boarders around everything.

function load_stylesheets(){

  wp_enqueue_style('bootstrap4', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap-grid.min.css');

  wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');

  wp_enqueue_style('magnificpopup', 'https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css');

    wp_register_style('custom', get_template_directory_uri() . '/css/bsite.css', array(), 1, 'all');
  wp_enqueue_style('custom');

  /*wp_register_style('custom', get_template_directory_uri() . '/custom.css', array(), 1, 'all');
  wp_enqueue_style('custom');*/
 }
 add_action('wp_enqueue_scripts', 'load_stylesheets');

 

 function addjs(){
    wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.5.1.slim.min.js', array( 'jquery' ),'',true );

    wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'',true );

    wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'',true );

    wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'',true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
 

   
<div class="col-sm-6 col-lg-3 text-center my-3">
        <a href="" class="skills-icon p-2 rounded-circle">
          <i class="fab fa-html5"></i>
        </a>
        <h6 class="text-uppercase font-weight-bold my-3">html</h6>
        <div class="skills-underline"></div>
        <p class="w-75 mx-auto text-muted">
          clean written code and layout thsat includes comments to ease the
          process future updates
        </p>
      </div>



   .skills-icon {
  font-size: 3rem;
  color: var(--mainYellow);
  background: var(--mainGrey);
}
.skills-icon:hover {
  color: var(--mainYellow);
}
.skills-underline {
  width: 4rem;
  height: 0.3rem;
  background: var(--mainBlue);
  margin: 1rem auto;
}

Answer 1

等待大神解答