我正在尝试做一个网站，我必须在顶部标题栏添加一个电子邮件svg。但是每当我尝试添加它时，它会让我的狂欢消失。而且它还会改变下面div的边距。有什么方法可以解决这个问题吗？
这是div class ='email-button'中的svg导致的问题。
谢谢大家的回答。我发现这是我的vs代码中的一个问题。我现在正在一个新的编辑器中编写。
下面是我的代码：

@charset "UTF-8";
body {
  overflow-x: hidden;
  background-color: rgb(246, 253, 255);
  text-rendering: optimizeLegibility;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #257d61;
}

h1 {
  font-size: 48px;
  font-weight: 700;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #000000;
}

.clg-logo {
  margin-left: 10px;
  margin-right: 40px;
  height: inherit;
}

#header-bar {
  height: 40px;
  background-color: navy;
}

.header-nav-bar {
  height: inherit;
  margin-left: 10px;
  margin-right: 5px;
}

#carouselExampleIndicators {
  height: 300px;
}

.U-signup {
  padding: 50px;
  box-sizing: content-box;
  align-self: center;
}

.signup-form-content {
  padding: 50px;
}

.signupheader {
  background-color: blue;
  color: white;
}

.navbar {
  border-radius: 1S0px;
}

.navbar li {
  float: left;
  list-style: none;
  margin: 13px 20px;
}

.navbar ul {
  overflow: auto;
}

.navbar li a {
  padding: 3px 3px;
  text-decoration: none;
  color: black;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.navbar li a:hover {
  color: blueviolet;
  text-decoration: underline;
}

.svg-1 {
  float: left;
}

.image-margin {
  margin-left: 0%;
}

 .email-button {
   width: 24px;
   height: 24px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!--top bar-->
<div class="top-header">
  <div id="header-bar">
    <div>
      <svg style="color: white; margin-top:10px;margin-left:50px;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill svg-1" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z" fill="white"></path> </svg>
      <p style="color: white; display: flex;margin-top: 5px; margin-left: 5px;" class="svg-1">9999999999</p>
    </div>
    <div class="email-button">
      <svg style="color: white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:#fff;opacity:0;}.cls-2{fill:#231f20;}</style></defs><title>email</title><g id="Layer_2" data-name="Layer 2"><g id="email"><g id="email-2" data-name="email"><rect class="cls-1" width="24" height="24"></rect><path class="cls-2" d="M19,4H5A3,3,0,0,0,2,7V17a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V7A3,3,0,0,0,19,4Zm-.67,2L12,10.75,5.67,6ZM19,18H5a1,1,0,0,1-1-1V7.25l7.4,5.55a1,1,0,0,0,.6.2,1,1,0,0,0,.6-.2L20,7.25V17A1,1,0,0,1,19,18Z" fill="white"></path></g></g></g></svg>

    </div>

  </div>
  <div class="row spacer-16 sids-60">
    <div class="col-lg-3 my-auto">
      <div class="float-left clg-logo">
        <nav class="navbar navbar-light bg-light">
          <a class="navbar-brand" href="#">
            <img src="images\logo.png" width="30" height="30" class="d-inline-block align-top image-margin" alt="">
            <b>CAMS</b>
          </a>
        </nav>
      </div>
    </div>

    <div class="col-lg-9 my-auto">
      <div class="float-right header-nav-bar">
        <nav class="navbar">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Courses</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Public Notices</a></li>
            <li><a href="#">Admin</a></li>
            <li><a href="#">Users</a></li>
          </ul>
        </nav>
      </div>
    </div>

  </div>
</div>


<!--carousel slides-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://images.news18.com/ibnlive/uploads/2021/12/bts-3-1-164008807816x9.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="https://media.gq.com/photos/62aa49bd3ade2278af3f4f25/16:9/w_2560%2Cc_limit/GettyImages-1389467249.jpg" class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </button>
  <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </button>
</div>