左右の余白を消したい

このように、端に余白があります。
padding,marginを0にしても効きません。
教えて頂いたら幸いです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6	<link rel="stylesheet" href="stylesheet.css">
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
8  <link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet">
9  <title>Bootstrap</title>
10</head>
11
12<body>
13<div class="container-fluid">
14
15  <div class="row top">
16    <div class="top-col-video col-lg-6 col-xs-12">
17      <video
18        <source src="https://a0.muscache.com/v/a9/a7/a9a7873c-95de-5e37-8995-a5abb5b6b02f/a9a7873c95de5e378995a5abb5b6b02f_4000k_1.mp4">
19        </video>
20    </div>
21    <div class="top-col-box col-lg-6 col-xs-12">
22      <i class="fab fa-airbnb"></i>
23    </div>
24  </div>
25
26</div>
27<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
28  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
29</body>
30</html>

CSS
1@charset "UTF-8";
2* {
3	clear: both;
4}
5body {
6margin:0;
7padding:0;
8}
9.container-fluid {
10	height: 5000px;
11	margin:0;
12	padding:0;
13}
14
15
16.top {
17	border:solid;
18	margin:0;
19	padding:0;
20}
21.top-col-video {
22	background-color:green;
23	margin:0;
24	padding:0;
25}
26.top-col-video video{
27	object-fit: cover;
28	width:100%;
29	height:100%;
30	margin:0;
31	padding:0;
32}
33.top-col-box{
34	margin:0;
35	padding:0;
36}
37.fa-airbnb{
38	color:white;
39	font-size:35px;
40
41}
42
43
44@media screen and (min-width:992px) {
45	.top {
46		display: flex;
47		flex-direction: row-reverse;
48		height:720px;
49	}
50	.top-col-box{
51		background-color:black;
52		height:100%;
53	}
54	.top-col-video{
55		height:100%;
56	}
57}
58
59@media screen and (max-width:992px){
60.top{
61	height:740px;
62}
63.top-col-video{
64	height:65%;
65}
66.top-col-box{
67	height:35%;
68}
69.fa-airbnb{
70	display:none;
71}
72}
73
74@media screen and (max-width:768px){
75.top{
76	height:600px;
77}
78.top-col-video{
79	height:68%;
80}
81.top-col-box{
82	height:32%;
83}
84.fa-airbnb{
85	display:none;
86}
87}

行動規範の内容に同意します

回答2件

余白というのは緑色の部分のことを言っていますか？
それなら、bootstrap.min.css の .row の --bs-gutter-x: 1.5rem; のせいのようですね。

投稿2022/01/05 11:48

itagagaki

総合スコア8402

hurozuki

2022/01/05 12:34

いえ、余白は白いところです。説明が足りませんでしたね。回答ありがとうございました！

行動規範の内容に同意します

ベストアンサー

.p-0追加しちゃうのはどうでしょう。

<body>
    <div class="container-fluid p-0">

関係ありませんが、最初のvideoタグがおかしいみたいです。

html
1<video
2        <source src="https://a0.muscache.com/v/a9/a7/a9a7873c-95de-5e37-8995-a5abb5b6b02f/a9a7873c95de5e378995a5abb5b6b02f_4000k_1.mp4">
3        </video>

投稿2022/01/05 11:37

recal

総合スコア1126

hurozuki

2022/01/05 12:35

p-0追加したら余白消えました！ありがとうございました！

hurozuki

2022/01/06 05:20

すみません、質問とは関係ないのかもしれませんが、videoタグは何がおかしいのでしょうか？ ↓のサイトのデベロッパーツールを見て、同じように書いたのですが...。もしよろしければ教えて頂けますでしょうか？ https://www.airbnb.jp/host/homes?_set_bev_on_new_domain=1640823441_ZmY1ZjQzNzU0ODE5

行動規範の内容に同意します

あなたの回答