由于这两个部分，我在网页的侧面出现了一个奇怪的空白问题。
我尝试使用overflow-x：hidden解决问题，这导致导航栏固定在页面顶部，而没有样式。非常感谢您对此问题的一些专家帮助。谢谢！
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
#header {
position: absolute;
z-index: 10;
width: 100%;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.container-fluid {
padding: 0px;
}
.btn-primary {
background-color: #ADE75F;
border: 1px solid #ADE75F;
}
.btn-primary:hover {
background-color: #71D002;
border: 1px solid #71D002;
}
/****************************************************************************/
/***************************** Mission & Vision *****************************/
/****************************************************************************/
.mission-vision container-fluid {
margin-right: auto;
margin-left: auto;
}
.mission-vision h3 {
text-transform: uppercase;
margin-top: 20px;
font-size: 1.5em;
text-align: center;
}
.mission-vision p {
font-size: 1em;
line-height: 1em;
text-align-last: center;
}
.mission-vision .card {
width: 100%;
height: 100%;
}
.mission-vision .card-group a {
text-decoration: none !important;
}
.mission-vision .card-title, .card-text {
color: white;
}
.mission-vision hr.card-line {
border-top: 4px solid;
width: 120px;
margin: 30px auto;
color: #ADE75F;
}
.mission-vision .card-img-overlay {
background: rgba(0, 0, 0, 0.4);
}
.mission-vision .card-img {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-position: center;
background-size: cover;
transition:all 0.3s ease-in-out;
opacity:1;
}
.mission-vision .card:hover .card-img,
.mission-vision .card:focus .card-img {
opacity:0.5;
}
/****************************************************************************/
/********************************** Footer **********************************/
/****************************************************************************/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 80%;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer a {
color: #d5d5d5;
text-decoration: none;
transition: .2s all;
}
footer ul li {
margin-bottom: 10px;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer .padding {
padding-bottom: .8rem;
}
.list-unstyled {
list-style: none;
}
footer a:hover {
text-decoration: none;
color: #71D002;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CNY Gymnastics Centre</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!---- Mission and Vision Card Group---->
<section class="mission-vision">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card-group">
<div class="card">
<a href="#">
<img src="css/img/mission.jpg" class="card-img" alt="Mission">
<div class="card-img-overlay">
<h3 class="card-title">Mission Statement</h3>
<hr class="card-line">
<p class="card-text">At CNY Gym Centre, our mission is to help each gymnast reach their full potential as a gymnast and as a person. We treat each athlete as an individual doing our best to foster confidence and lasting self-esteem. We strive to provide a safe and quality gymnastics program that will have an important and positive impact in your child’s future. We are not only committed to helping each child become the best gymnast they can possible be, but also helping her/him become a happy, healthy and responsible person. We believe that gymnastics is a vehicle in which we can teach skills that will last a lifetime, well beyond their gymnastics years.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img src="css/img/vision.jpg" class="card-img" alt="Vision">
<div class="card-img-overlay">
<h3 class="card-title">Vision</h3>
<hr class="card-line">
<p class="card-text">With over 30 years of experience, we've become one of the top gymnastics clubs in New York state. We offer programs for children 6 months-18 years. Our programs range from Baby Gym and Parent and Tot to our birthday parties, summer camps, and our high performing teams. Whatever you sign up for, you can always expect that students will be taught in a fun, safe, and positive environment. Here, your child will gain new skills, learn life lessons, make great friends, and become a part of a close community like no other.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--- Footer -->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="css/img/Logo/logo-footer.png">
<hr class="light">
<ul class="list-unstyled">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Classes</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<li>
<a href="#">Birthdays</a>
</li>
<li>
<a href="#">Camps</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Upcoming Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Shoppingtown</h5>
<hr class="light">
<p>3649 Erie Boulevard East DeWitt, NY 13214</p>
<p>( 315 ) 437 - 4535</p>
<p>Mon & Fri: 1:00 pm - 7:30 pm</p>
<p>Tue - Th: 10:00 am - 7:30 pm</p>
<p>Sat: 9:00 am - 4:30 pm</p>
<p>Sun: Closed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Great Northern</h5>
<hr class="light">
<p>4155 State Highway 31 Clay, NY 13041</p>
<p>( 315 ) 622 - 4600</p>
<p>Mon - Fri: 10:00 am - 9:00 pm</p>
<p>Sat: 10:00 am - 9:00 pm</p>
<p>Sun: 11:00 am - 6:00 pm</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© cnygymcentre.com</h5>
</div>
</div>
</div>
</footer>
答案 0 :(得分：0)
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
#header {
position: absolute;
z-index: 10;
width: 100%;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.container-fluid {
padding: 0px;
}
.btn-primary {
background-color: #ADE75F;
border: 1px solid #ADE75F;
}
.btn-primary:hover {
background-color: #71D002;
border: 1px solid #71D002;
}
/****************************************************************************/
/***************************** Mission & Vision *****************************/
/****************************************************************************/
.mission-vision container-fluid {
margin-right: auto;
margin-left: auto;
}
.mission-vision h3 {
text-transform: uppercase;
margin-top: 20px;
font-size: 1.5em;
text-align: center;
}
.mission-vision p {
font-size: 1em;
line-height: 1em;
text-align-last: center;
}
.mission-vision .card {
width: 100%;
height: 100%;
}
.mission-vision .card-group a {
text-decoration: none !important;
}
.mission-vision .card-title, .card-text {
color: white;
}
.mission-vision hr.card-line {
border-top: 4px solid;
width: 120px;
margin: 30px auto;
color: #ADE75F;
}
.mission-vision .card-img-overlay {
background: rgba(0, 0, 0, 0.4);
}
.mission-vision .card-img {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-position: center;
background-size: cover;
transition:all 0.3s ease-in-out;
opacity:1;
}
.mission-vision .card:hover .card-img,
.mission-vision .card:focus .card-img {
opacity:0.5;
}
/****************************************************************************/
/********************************** Footer **********************************/
/****************************************************************************/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 80%;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer a {
color: #d5d5d5;
text-decoration: none;
transition: .2s all;
}
footer ul li {
margin-bottom: 10px;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer .padding {
padding-bottom: .8rem;
}
.list-unstyled {
list-style: none;
}
footer a:hover {
text-decoration: none;
color: #71D002;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CNY Gymnastics Centre</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!---- Mission and Vision Card Group---->
<section class="mission-vision">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card-group">
<div class="card">
<a href="#">
<img src="css/img/mission.jpg" class="card-img" alt="Mission">
<div class="card-img-overlay">
<h3 class="card-title">Mission Statement</h3>
<hr class="card-line">
<p class="card-text">At CNY Gym Centre, our mission is to help each gymnast reach their full potential as a gymnast and as a person. We treat each athlete as an individual doing our best to foster confidence and lasting self-esteem. We strive to provide a safe and quality gymnastics program that will have an important and positive impact in your child’s future. We are not only committed to helping each child become the best gymnast they can possible be, but also helping her/him become a happy, healthy and responsible person. We believe that gymnastics is a vehicle in which we can teach skills that will last a lifetime, well beyond their gymnastics years.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img src="css/img/vision.jpg" class="card-img" alt="Vision">
<div class="card-img-overlay">
<h3 class="card-title">Vision</h3>
<hr class="card-line">
<p class="card-text">With over 30 years of experience, we've become one of the top gymnastics clubs in New York state. We offer programs for children 6 months-18 years. Our programs range from Baby Gym and Parent and Tot to our birthday parties, summer camps, and our high performing teams. Whatever you sign up for, you can always expect that students will be taught in a fun, safe, and positive environment. Here, your child will gain new skills, learn life lessons, make great friends, and become a part of a close community like no other.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--- Footer -->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="css/img/Logo/logo-footer.png">
<hr class="light">
<ul class="list-unstyled">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Classes</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<li>
<a href="#">Birthdays</a>
</li>
<li>
<a href="#">Camps</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Upcoming Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Shoppingtown</h5>
<hr class="light">
<p>3649 Erie Boulevard East DeWitt, NY 13214</p>
<p>( 315 ) 437 - 4535</p>
<p>Mon & Fri: 1:00 pm - 7:30 pm</p>
<p>Tue - Th: 10:00 am - 7:30 pm</p>
<p>Sat: 9:00 am - 4:30 pm</p>
<p>Sun: Closed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Great Northern</h5>
<hr class="light">
<p>4155 State Highway 31 Clay, NY 13041</p>
<p>( 315 ) 622 - 4600</p>
<p>Mon - Fri: 10:00 am - 9:00 pm</p>
<p>Sat: 10:00 am - 9:00 pm</p>
<p>Sun: 11:00 am - 6:00 pm</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© cnygymcentre.com</h5>
</div>
</div>
</div>
</footer>
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
body {
margin: 0;
padding: 0;
}
#header {
position: absolute;
z-index: 10;
width: 100%;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Poppins', sans-serif;
color: #222;
}
.container-fluid {
padding: 0px;
}
.btn-primary {
background-color: #ADE75F;
border: 1px solid #ADE75F;
}
.btn-primary:hover {
background-color: #71D002;
border: 1px solid #71D002;
}
/****************************************************************************/
/***************************** Mission & Vision *****************************/
/****************************************************************************/
.mission-vision container-fluid {
margin-right: auto;
margin-left: auto;
}
.mission-vision h3 {
text-transform: uppercase;
margin-top: 20px;
font-size: 1.5em;
text-align: center;
}
.mission-vision p {
font-size: 1em;
line-height: 1em;
text-align-last: center;
}
.mission-vision .card {
width: 100%;
height: 100%;
}
.mission-vision .card-group a {
text-decoration: none !important;
}
.mission-vision .card-title, .card-text {
color: white;
}
.mission-vision hr.card-line {
border-top: 4px solid;
width: 120px;
margin: 30px auto;
color: #ADE75F;
}
.mission-vision .card-img-overlay {
background: rgba(0, 0, 0, 0.4);
}
.mission-vision .card-img {
width: 100%;
height: 100%;
background-color: black; /* fallback color */
background-position: center;
background-size: cover;
transition:all 0.3s ease-in-out;
opacity:1;
}
.mission-vision .card:hover .card-img,
.mission-vision .card:focus .card-img {
opacity:0.5;
}
/****************************************************************************/
/********************************** Footer **********************************/
/****************************************************************************/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d5d5d5;
width: 80%;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer a {
color: #d5d5d5;
text-decoration: none;
transition: .2s all;
}
footer ul li {
margin-bottom: 10px;
}
hr.light-100 {
border-top: 1px solid #d5d5d5;
margin-top: .8rem;
margin-bottom: 1rem;
}
footer .padding {
padding-bottom: .8rem;
}
.list-unstyled {
list-style: none;
}
footer a:hover {
text-decoration: none;
color: #71D002;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CNY Gymnastics Centre</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!---- Mission and Vision Card Group---->
<section class="mission-vision">
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="card-group">
<div class="card">
<a href="#">
<img src="css/img/mission.jpg" class="card-img" alt="Mission">
<div class="card-img-overlay">
<h3 class="card-title">Mission Statement</h3>
<hr class="card-line">
<p class="card-text">At CNY Gym Centre, our mission is to help each gymnast reach their full potential as a gymnast and as a person. We treat each athlete as an individual doing our best to foster confidence and lasting self-esteem. We strive to provide a safe and quality gymnastics program that will have an important and positive impact in your child’s future. We are not only committed to helping each child become the best gymnast they can possible be, but also helping her/him become a happy, healthy and responsible person. We believe that gymnastics is a vehicle in which we can teach skills that will last a lifetime, well beyond their gymnastics years.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
<div class="card">
<a href="#">
<img src="css/img/vision.jpg" class="card-img" alt="Vision">
<div class="card-img-overlay">
<h3 class="card-title">Vision</h3>
<hr class="card-line">
<p class="card-text">With over 30 years of experience, we've become one of the top gymnastics clubs in New York state. We offer programs for children 6 months-18 years. Our programs range from Baby Gym and Parent and Tot to our birthday parties, summer camps, and our high performing teams. Whatever you sign up for, you can always expect that students will be taught in a fun, safe, and positive environment. Here, your child will gain new skills, learn life lessons, make great friends, and become a part of a close community like no other.</p>
<br>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--- Footer -->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="css/img/Logo/logo-footer.png">
<hr class="light">
<ul class="list-unstyled">
<li>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Classes</a>
</li>
<li>
<a href="#">Schedule</a>
</li>
<li>
<a href="#">Birthdays</a>
</li>
<li>
<a href="#">Camps</a>
</li>
<li>
<a href="#">Team</a>
</li>
<li>
<a href="#">Upcoming Events</a>
</li>
</ul>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Shoppingtown</h5>
<hr class="light">
<p>3649 Erie Boulevard East DeWitt, NY 13214</p>
<p>( 315 ) 437 - 4535</p>
<p>Mon & Fri: 1:00 pm - 7:30 pm</p>
<p>Tue - Th: 10:00 am - 7:30 pm</p>
<p>Sat: 9:00 am - 4:30 pm</p>
<p>Sun: Closed</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Great Northern</h5>
<hr class="light">
<p>4155 State Highway 31 Clay, NY 13041</p>
<p>( 315 ) 622 - 4600</p>
<p>Mon - Fri: 10:00 am - 9:00 pm</p>
<p>Sat: 10:00 am - 9:00 pm</p>
<p>Sun: 11:00 am - 6:00 pm</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>© cnygymcentre.com</h5>
</div>
</div>
</div>
</footer>
答案 1 :(得分：0)
在每行上使用.no-gutter解决了该问题。这样就消除了导致页面右侧空白的空白和边距。