کارنکردن بک گراند

چرا بک گراند در قطعه کد بنده کار نمی‌کنه؟
<!DOCTYPE html>
<html lang="fa">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>پروژه سون لرن</title>
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.css"
      integrity="sha512-gUmZC4CtgECJeVW1aeRk2AmpdQsl1ABsR8Cp4PmvANxm+TzwNNpe2MoJT/htbYsn0GR9+sIMDrd9vT9Pt0ZANA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- /Font Awesome -->
    <link rel="stylesheet" href="/css/system-grid-system.css" />
    <link rel="stylesheet" href="/css/style.css" />
  </head>
  <body>
    <div class="container-fluid container-fluid-custom">
      <div class="row">
        <div class="container">
          <div class="col-xs-6">
            <i class="far fa-envelope">
              <span>mehdihoshangian@gmail.com</span></i>
            <i class="fas fa-phone"><span>09126817768</span></i>
          </div>
          <div class="col-xs-6"></div>
        </div>
      </div>
    </div>
    <script src="/assets/js/main.js"></script>
  </body>
</html>
style in css
@font-face {
  font-family: Vazir-Medium;
  src: url(/fonts/Vazir.eot) format("eot"),
    url(/fonts/Vazir.ttf) format("ttf"), url(./fonts/Vazir.woff) format("woff"),
    url(/fonts/Vazir.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
}
*,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Vazir-Medium;
}
body {
  direction: rtl;
}
a {
  text-decoration: none;
}
li,
ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.container-fluid-custom{
  background-color: bisque;
  color: #fff;
}

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>پروژه سون لرن</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.css" integrity="sha512-gUmZC4CtgECJeVW1aeRk2AmpdQsl1ABsR8Cp4PmvANxm+TzwNNpe2MoJT/htbYsn0GR9+sIMDrd9vT9Pt0ZANA==" crossorigin="anonymous" referrerpolicy="no-referrer" />  <link rel="stylesheet" href="/css/system-grid-system.css" /> <link rel="stylesheet" href="/css/style.css" /> <style> @font-face { font-family: Vazir-Medium; src: url(/fonts/Vazir.eot) format("eot"), url(/fonts/Vazir.ttf) format("ttf"), url(./fonts/Vazir.woff) format("woff"), url(/fonts/Vazir.woff2) format("woff2"); font-weight: 700; font-style: normal; } *, body { margin: 0; padding: 0; box-sizing: border-box; font-family: Vazir-Medium; } body { direction: rtl; } a { text-decoration: none; } li, ol, ul { margin: 0; padding: 0; list-style: none; } .container-fluid-custom { background-color: bisque; color: #fff; } </style> </head> <body> <div class="container-fluid container-fluid-custom"> <div class="row"> <div class="container"> <div class="col-xs-6"> <i class="far fa-envelope"> <span>mehdihoshangian@gmail.com</span></i > <i class="fas fa-phone"><span>09126817768</span></i> </div> <div class="col-xs-6"></div> </div> </div> </div> <script src="/assets/js/main.js"></script> </body> </html>