Как я могу использовать Bootstrap Карусель без импорта CSS?

Question

Я использую Bootstrap Карусель, поэтому я импортирую ее с:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

, но она ломает все мои CSS. После этого я импортирую свой код CSS, но Bootstrap CSS перезаписывает значение по умолчанию, например, margin-block-start. Так как я могу предотвратить Bootstrap перезаписать значение по умолчанию CSS.

(я использую только Карусель)

Редактировать :

• Мой HTML и CSS код (не полностью):

* {
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100vh;
  /*define the height*/
  width: 100vw;
  /*define the width*/
  margin: 0;
  /*remove the margin*/
  background-color: #e0e2db;
  /*define background-color #e0e2db*/
  display: flex;
}

... .wwhw {
  flex-grow: 1;
  margin-right: 2.5%;
  scroll-behavior: smooth;
}

.wwhw .chevron {
  animation-name: zoom-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  position: absolute;
}

.wwhw header,
.wwhw article {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.wwhw header .social-media {
  display: flex;
  width: 100%;
  height: 5%;
  justify-content: flex-end;
}

.wwhw header .social-media a {
  margin-left: 1%;
}

.wwhw header .trello {
  background-color: #006ca3;
}

.wwhw header .github {
  background-color: #24292e;
}

.wwhw header .social-media div {
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1%;
  transition: 0.5s;
}

.wwhw header .social-media div:hover {
  transform: scale(1.1);
  transition: 0.5s;
}

.wwhw header .social-media div svg {
  color: #fff;
  width: 70%;
  height: 70%;
}

.wwhw header h1 {
  font-size: 3em;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-style: italic;
  line-height: 0.75;
  color: #c5c7c0;
}

.wwhw article {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.wwhw article h2 {
  font-size: 2em;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  color: #000000;
  white-space: normal;
  text-align: center;
}

.wwhw .how div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  align-items: center;
}

.wwhw .how table {
  height: 50%;
  width: 50%;
}

.wwhw .how table tr {
  width: 100%;
  margin: 5vh 0;
}

.wwhw .how table tr:nth-child(1) {
  transform: translateY(-2.5vh);
}

.wwhw .how table tr:nth-child(2) {
  transform: translateY(2.5vh);
}

.wwhw .how td {
  height: 25%;
  max-width: 50%;
  width: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.5s;
}

.wwhw .how td:hover {
  transform: scale(1.2);
  transition: 0.5s;
}

.wwhw .how td a div {
  height: 100%;
  width: 100%;
}

.wwhw .how .td-1 {
  background-image: url(../resources/html5.svg);
}

.wwhw .how .td-2 {
  background-image: url(../resources/css3.svg);
}

.wwhw .how .td-3 {
  background-image: url(../resources/js.svg);
}

.wwhw .how .td-4 {
  background-image: url(../resources/jquery.png);
}

.wwhw .use h2 {
  margin-bottom: 0;
}

.wwhw .use .slide-menu *,
.wwhw .use .slide-menu {
  margin: 0;
  padding: 0;
}

.wwhw .use .slide-menu .clear {
  clear: both;
}

.wwhw .use .slide-toggle {
  display: none;
}

.wwhw .use .slidemenu {
  font-family: arial, sans-serif;
  width: 80%;
  margin: 3% auto;
  overflow: hidden;
  height: 11%;
}

.wwhw .use .slidemenu label {
  width: 33%;
  text-align: center;
  display: block;
  float: left;
  color: #333;
  opacity: 0.2;
}

.wwhw .use .slidemenu label:hover {
  cursor: pointer;
  color: #666;
}

.wwhw .use .slidemenu label span {
  display: block;
  padding: 4%;
  font-size: 1.25em;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  text-align: center;
}

.wwhw .use .slider {
  width: 100%;
  height: 8%;
  display: block;
  background: #ccc;
  border-radius: 5px;
}

.wwhw .use .slider .bar {
  width: 33%;
  height: 100%;
  background: #333;
  border-radius: 5px;
}

.wwhw .use .slidemenu label,
.slider .bar {
  transition: all 500ms ease-in-out;
  -webkit-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

.wwhw .use .slidemenu .slide-toggle:checked+label {
  opacity: 1;
}

.wwhw .use .slidemenu #slide-item-1:checked~.slider .bar {
  margin-left: 0;
}

.wwhw .use .slidemenu #slide-item-2:checked~.slider .bar {
  margin-left: 33%;
}

.wwhw .use .slidemenu #slide-item-3:checked~.slider .bar {
  margin-left: 67%;
}

.wwhw .use .carousel-container {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.wwhw .use .carousel {
  width: 50%;
}

.wwhw .use .carousel img {
  border-radius: 1vw;
}

.wwhw .use .carousel-caption {
  position: relative;
  left: auto;
  right: auto;
  margin-top: 3%;
}

.wwhw .use .carousel-caption p {
  text-shadow: none;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  font-size: 1em;
  color: #2e3532;
}

.wwhw .gform {
  flex-grow: 1;
  width: inherit;
}

<head>
  <meta charset="utf-8">
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="master/style.css">
  <link href="https://emoji-css.afeld.me/emoji.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
  <style data="slider-thumb"></style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-scrollify@1.0.20/jquery.scrollify.js"></script>
  <script src="master/style.js" charset="utf-8"></script>
  <script src="master/generate_meal.js" charset="utf-8"></script>
  <script src="master/script.js" charset="utf-8"></script>
  <title>Beatter</title>
  <link rel="shortcut icon" href="resources/favicon.ico">
</head>
...
<div class="wwhw">
  <header class="wwhw_scrollable">
    <div class="social-media">
      <a href="https://trello.com/b/2MX5nsO4/beatter">
        <div class="trello">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trello"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><rect x="7" y="7" width="3" height="9"/><rect x="14" y="7" width="3" height="5"/></svg>
        </div>
      </a>
      <a href="https://github.com/f-arthr/Beatter">
        <div class="github">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-github"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>
        </div>
      </a>
    </div>
    <img src="resources/logo.png" alt="">
    <h1>Beatter</h1>
    <div class="chevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>
    </div>
  </header>

  <article class="how wwhw_scrollable">
    <h2>Comment avons-nous réalisé Beatter ?</h2>
    <div>
      <table>
        <tbody>
          <tr>
            <td class="td-1" title="HTML5">
              <a href="https://fr.wikipedia.org/wiki/Html">
                <div></div>
              </a>
            </td>
            <td class="td-2" title="CSS3">
              <a href="https://fr.wikipedia.org/wiki/Cascading_Style_Sheets">
                <div></div>
              </a>
            </td>
          </tr>
          <tr>
            <td class="td-3" title="JavaScript">
              <a href="https://fr.wikipedia.org/wiki/Javascript">
                <div></div>
              </a>
            </td>
            <td class="td-4" title="jQuery">
              <a href="https://fr.wikipedia.org/wiki/Jquery">
                <div></div>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="chevron">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"/></svg>
    </div>
  </article>

  <article class="from wwhw_scrollable">
    <h2>Qui sommes-nous ?</h2>
    <p></p>
  </article>

  <article class="why wwhw_scrollable">
    <h2>Pourquoi avoir réalisé Beatter ?</h2>
    <p></p>
  </article>

  <article class="use wwhw_scrollable">
    <h2>Comment utiliser Beatter ?</h2>

    <nav class="slidemenu">
      <!-- Item 1 -->
      <input type="radio" name="slideItem" id="slide-item-1" class="slide-toggle" checked/>
      <label for="slide-item-1"><span>Ajouter une activité</span></label>
      <!-- Item 2 -->
      <input type="radio" name="slideItem" id="slide-item-2" class="slide-toggle" />
      <label for="slide-item-2"><span>Changer les paramètres</span></label>
      <!-- Item 3 -->
      <input type="radio" name="slideItem" id="slide-item-3" class="slide-toggle" />
      <label for="slide-item-3"><span>Afficher les recettes</span></label>
      <!-- Bar -->
      <div class="slider">
        <div class="bar"></div>
      </div>
    </nav>

    <div class="carousel-container">
      <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner" role="listbox">
          <div class="item active">
            <img src="resources/add_activity.gif" alt="">
            <div class="carousel-caption">
              <p>Pour ajouter une activité, cliquez sur le bouton "+", choisissez l'activité de votre choix et changer la durée et l'intensité. Enfin, cliquez sur le bouton "Sauvegarder".</p>
            </div>
          </div>

          <div class="item">
            <img src="resources/change_settings.gif" alt="">
            <div class="carousel-caption">
              <p>Pour changer vos paramètres, cliquez sur le bouton paramètres et changez ce que vous souhaitez.</p>
            </div>
          </div>

          <div class="item">
            <img src="resources/marmiton_feature.gif" alt="">
            <div class="carousel-caption">
              <p>Vous pouvez découvrir comment cuisiner un aliment en cliquant sur celui-ci.</p>
            </div>
          </div>
        </div>
      </div>

  </article>

  <article class="give wwhw_scrollable">
    <h2>Votre avis</h2>
    <iframe class="gform" src="https://docs.google.com/forms/d/e/1FAIpQLSfP9s52HSCJ390Y2RTANpAdalKnqyzAICSIH8_5Q1IEAGnAwQ/viewform?embedded=true" width="75%" frameborder="0" marginheight="0" marginwidth="0">Chargement…</iframe>
  </article>
  </div>
  </body>