Trying to integrate a Bootstrap theme I created into WordPress, but encountering issues. Despite enqueuing all necessary style sheets without errors in the console, WordPress is interfering with the layout. The rounded circles with images are appearing square and borders are showing around elements. How can this unwanted behavior be prevented?
<?php
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' ),'3.5.1', true );
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.6.0/umd/popper.min.js', array( 'jquery' ),'2.6.0', true );
wp_enqueue_script( 'boot4','https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js', array( 'jquery' ),'1.1.0', true );
wp_enqueue_script( 'boot3','https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js', array( 'jquery' ),'4.5.3', true );
}
add_action( 'wp_enqueue_scripts', 'addjs' );
?>
<?php get_header(); ?>
<body>
<nav class="navbar navbar-expand-lg px-3" id="navBar">
<a href="#" class="navbar text-uppercase"> sites by bryan </a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#myNav"
>
<span class="navbar-icon">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="myNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item active">
<a href="#navBar" class="nav-link">home</a>
</li>
<li class="nav-item">
<a href="#skills" class="nav-link">skills</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link">contact</a>
</li>
</ul>
</div>
</nav>
<!-- headder section -->
<header class="header" id="header">
<div class="container-fluid">
<div class="row height-max align-items-center">
<div class="col col-md-9 ml-auto text-right pr-5">
<h1 class="text-uppercase my-2 title">sites by bryan</h1>
<h3 class="text-uppercase">what can i do for you?</h3>
</div>
</div>
</div>
</header>
<!-- skills section -->
<section class="skills py-5" id="skills">
<div class="container">
<div class="row mb-5">
<div
class="col d-flex flex-wrap text-uppercase justify-content-center"
>
<h1 class="font-weight-bold align-self-center mx-1">my</h1>
<h1 class="section-title--special mx-1">skills</h1>
</div>
</div>
<div class="row">
<!-- code continues... -->