[！[在此处输入图像描述][1]][1]
我已经去除了身体两侧的边缘。但正如你所看到的，右边的空白仍然存在(白色)。我也试着把导航栏和前边距设置为0，但什么都不起作用。下面提供了html和css代码。我正在创建这个网站作为我的投资组合的样本，但右侧和底部都有一个空白。我不知道是什么造成了这个空间。我试过将所有边距更改为0，只使用填充，但没有任何帮助。我也试过在不同的浏览器中打开这个文件，但什么都没有。我是编码的新手，也是stackoverflow的新手。我们将非常感谢你的帮助。谢谢
下面是我的css：
body {
margin: 0 0;
padding: 0 0;
}
/********************Navbar*************/
.navbar
{
background-color: #0f3057;
padding: 20px 100px 10px;
}
.nav-item {
padding: 0 10px;
font-size: 1rem;
font-family: 'Didact Gothic', sans-serif;
font-weight: 100;
}
.nav-name {
font-family: 'Antic Didone', serif;
font-size: 2rem;
}
/**************************************************Front*************************************/
.title-img{
width: 100%;
height: 100%;
}
.img-div {
padding: 50px 30px 50px 100px;
}
#Front-pg {
background-color: #00587a;
}
.txt-div {
padding: 70px 0 0 0;
color: white;
text-align: center;
}
h1 {
font-family: 'Antic Didone', serif;
font-size: 4rem;
}
.p1 {
line-height: 2rem;
padding-top: 30px;
font-family: 'Didact Gothic', sans-serif;
}
.p2 {
line-height: 2rem;
font-family: 'Didact Gothic', sans-serif;
}
/***********************************Timing*****************************/
#Timing {
background-color: #e7e7de;
}
.timing {
text-align: center;
padding-top: 40px;
}
.timing-photo {
width: 950px;
height: 500px
}
/************************************* Price *******************************************/
#Price {
background-color: #e7e7de;
padding-top: 40px;
text-align: center;
}
.Pricehead {
font-family: 'Antic Didone', serif;
}
.Menu {
text-align: left;
font-family: 'Didact Gothic', sans-serif;
}
/**************************************** mobile view ***********************************/
@media (max-width: 1020px) {
.title-img {
width: 450px;
height: 225px;
}
#Front-pg {
text-align: center;
}
}
下面是我的html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ABC Saloon</title>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<!-- Bootscrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- FONTS -->
<link rel="preconnect" href="https://fonts.gstatic.com"
<link href="https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">
<body>
<section id="title">
<!-- Nav Bar -->
<nav class="navbar navbar-dark navbar-expand-lg">
<a class="navbar-brand nav-name" href=""><i>ABC Saloon</i></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#footer">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cta">Gallery</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- Front Page-->
<section id="Front-pg">
<div class="row">
<div class="col-lg-6 img-div">
<img class="title-img" src="images/1265.jpg" alt="Saloon">
</div>
<div class="col-lg-6 txt-div">
<h1><i>ABC Hair Saloon</i> </h1>
<p class="p1">We're here to listen, educate and advise you on
what will work best for <br>you and your new look</p>
<br>
<p class="p2">Founded in 2000, AR Hair Salon 356 has grown to be the number one <br>Hair Salon in New York, committed to giving you the look you’ve <br>
always wanted. We have an extensive selection of services to choose
<br> from so you can get exactly what you need. Swing by and see how
<br> we can help today!</p>
</div>
</div>
</section>
<section id="Timing">
<div class="timing">
<img class="timing-photo" src="images/timg.png" alt="timing">
</div>
</section>
<section id="Price">
<h1 class="Pricehead"> <i>Price List</i> </h1>
<div class="Menu">
</div>
</section>
</body>
</html>
我不确定你在问什么，但我检查了一下，问题来自你的引导程序。
你放在Front pg部分下面的类"行"会给你
margin-right: -15px
margin-left: -15px;
您可以通过在自己的CSS文件中添加一个类行来覆盖这个：
.row{
margin: 0;
}
在HTML 中链接CSS时，只需确保您拥有的CSS文件位于引导样式表下方
问题出在类为row的div中。如果您查看_grid.scss文件，您会发现类row的规则集。它包含CCD_ 4。
你只需要去掉那个空白。
要做到这一点，您可以覆盖margin属性，但必须记住一些角色，例如选择器的特定性和代码的位置。
最简单的方法是将此规则集插入要覆盖的规则集之后，无论是在其下方还是在_grid.scss文件之后的文件中。
.row {
margin-right: 0 !important;
}
你的身体有0边距，没有填充，只需确保孩子们受到限制(身体宽度)：
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
溢出-x将限制x方向上的溢出。