我决定在我的网站中实现引导轮播，我从W3Schools 网站获得了代码，我按照如何在我的网站中应用幻灯片的说明进行操作，幻灯片效果很好，但它弄乱了我网站的元素。
一个例子是，当我在我的网站中应用幻灯片时，我的 Merriweather serif 字体变得比以前更轻，即使在 CSS 中字体粗细是粗体。这也发生在我的链接上。
另一件事是它增加了我的页脚和导航栏的宽度。
我试图更多地研究这个问题，但我找不到任何有类似问题的人。
这是我的网站的图像，没有引导轮播幻灯片代码：
我真的希望我的网站有引导轮播幻灯片，因为它增加了交互性，但同时我不希望我的内容和元素发生巨大变化。
任何帮助将不胜感激，以帮助解决这个问题。
这是 CSS 和 HTML（如果您想查看引导轮播幻灯片对我网站上的元素和内容的影响，请运行下面的代码片段）
html,
body {
background-color: #09018a;
}
#container {
width: 1200px;
height: 1300px;
border: 3px solid #ffbd1e;
background-color: #FFFFFF;
position: absolute;
left: 140px;
top: 8px;
}
#nav {
width: 1200px;
height: 75px;
font-size: 1.5em;
font-weight: bold;
text-align: center;
background-color: #d7001f;
position: absolute;
top: 250px;
}
#footer {
width: 1200px;
height: 100px;
position: relative;
background-color: #d7001f;
top: 570px;
font-family: 'Merriweather', serif;
}
#footer a:hover {
color: rgb(0, 0, 255);
font-weight: bold;
}
#myCarousel {
width: 400px;
height: 300px;
position: absolute;
top: 450px;
left: 750px;
padding: 10px;
margin: 30px;
z-index: 3;
border: 3px solid #000000;
}
header img {
position: relative;
left: 500px;
}
#nav li {
display: inline;
font-family: 'Merriweather', serif;
}
#nav a {
text-decoration: none;
}
#nav a:link {
display: inline-block;
width: 200px;
color: #5c3205;
border-radius: 8px;
box-shadow: 1px 1px 2px 2px #f26522;
background-color: #e79806;
text-shadow: 3px 2px 3px #aaa;
position: relative;
top: 20px;
left: 5px;
}
#nav a:hover {
color: #ff0000;
}
#nav a:visited {
color: #5c3205;
}
p {
font-size: 18px;
}
h3 {
font-size: 15px;
}
h4 {
font-size: 15px;
font-style: italic;
}
.story1 {
width: 700px;
height: 600px;
position: relative;
left: 50px;
top: 300px;
padding: 5px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 {
width: 450px;
height: 200px;
position: absolute;
right: 700px;
top: 900px;
margin-top: 20px;
font-family: 'Merriweather', serif;
font-weight: bold;
}
.story3 li {
margin-bottom: 15px;
font-size: 18px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Course Outline</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Merriweather:300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="Testing.css" type="text/css">
</head>
<body>
<div id="container">
<header>
</header>
<div id="nav">
</div>
<div class="story1">
<h1>Computer Science at Tawa College</h1>
<h2>DITCS101</h2>
<p>In DITCS101 you will learn programming languages such as Python, CSS3, HTML5 and Scratch, you will also learn to use Webflow to design your website without any coding. You will be tested on these programming languages by means of doing various assesments
like using Python to construct a basic computer program for a specified task and using Notepad++ to make a prototype (like a website) to address a brief.
</p>
<h2>DITCS201</h2>
<p>In DITCS201 your knowledge of programming languages like Python, CSS3, HTML5 will be expanded and you will be taught new techniques and features that you will be utilising in various assesments. You will also be taught PHP which is a server-side
scripting language designed for web development and also MYSQL which is the world's second most used relational database management system.
</p>
<h2>DITCS301</h2>
<p>In DITCS301, your knowledge of Python, CSS3, HTML5, PHP and MYSQL will be further expanded for you to use in various assesments as well as learning JQUERY to create animations for websites.
</p>
</div>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/Person1.jpg" alt="Masterchief">
</div>
<div class="item">
<img src="images/Person2.jpg" alt="Tuna pasta bake">
</div>
<div class="item">
<img src="images/Person3.jpg" alt="Chickpea and tomato curry">
</div>
<div class="item">
<img src="images/Person4.jpg" alt="Asian beef and noodle salad">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h2>Bootstrap Carousel Slideshow</h2>
</div>
<div class="story3">
<h2>Course booklets on E2Learn</h2>
<ul>
<li><a href="http://e2learn.school.nz/pluginfile.php/22162/mod_resource/content/0/2016%20-%20DITCS101.pdf">DITCS101 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22163/mod_resource/content/0/2016%20-%20DITCS201.pdf">DITCS201 2016</a>
</li>
<li><a href="http://e2learn.school.nz/pluginfile.php/22164/mod_resource/content/0/2016%20-%20DITCS301.pdf">DITCS301 2016</a>
</li>
</ul>
</div>
<div id="footer">
<h4>Website logo by Kyle Josef, used under <a href="http://creativecommons.org/licenses/by/2.0/">CC BY</a> /Forward slash,less than sign and shield outline resized. Shield outline colour changed to yellow.
</h4>
</div>
</div>
</body>
</html>