我的页脚覆盖了整个页面时遇到了麻烦。它在超大屏幕上很好但是当我在lg，md，sm上测试它时，右边有一个向右滚动的边距。它将屏幕的宽度扩大到大于屏幕的大小（视口？）。这是我的一些代码。
<footer class="footer text-center" style="height:420px; margin-top:220px">
<div class="container">
<h1 class="text-secondary col-lg text-center col-md offset-md-1" style="margin-bottom:5%">Contact</h1>
<div class="row" style="height:200px; margin-top:-2%">
<div class="col-md-4 mb-5 col-lg-4 col-md" style="">
<h4 class="text-uppercase mb-4 text-secondary"><u>Get in touch</u></h4>
<div class="col-lg col-md" style="">
<p class="footer-contact text-primary text-left"><i class="fa fa-home"></i> 9416 Barry dr, Romulus, MI</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-phone"></i> 703-517-0030</p>
<p class="footer-contact text-primary text-left"><i class="fa fa-envelope"></i> hellochrisyou@gmail.com</p>
</div>
</div>
<div class="col-lg-4 col-md-3 offset-md-2" style="background-color:#ffffff; margin-left:0.5%">
<h4 class="text-uppercase col-lg text-secondary text-center"><u>Social Media</u></h4>
<ul class="list-inline mb-0 footer-social">
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-facebook icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-google-plus icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-twitter icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-linkedin icon-margin"></i>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-outline-light btn-secondary text-center rounded-circle" href="#">
<i class="fa fa-fw fa-github icon-margin"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-4 col-lg-4" style="margin-left:-0.5%">
<h4 class="text-uppercase mb-4 text-secondary"><u>Popular Links</u></h4>
<div class="container-fluid">
<div class="row footer-wide"">
<ul class="nav navbar-nav col-lg text-center" style="margin-left:5%">
<li><a style="color:#d3d3d3" href="#section1">Home</a></li>
<li><a style="color:#d3d3d3" href="#section2">About Me</a></li>
<li><a style="color:#d3d3d3" href="#section3">Education</a></li>
<li><a style="color:#d3d3d3" href="#section4">Skills</a></li>
<li><a style="color:#d3d3d3" href="#section5">Portfolio</a></li>
<li><a style="color:#d3d3d3" href="#section6">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
感谢。
克里斯
答案 0 :(得分：1)
将这些规则添加到您的html和body css标记
max-width: 100%;
overflow-x: hidden;
答案 1 :(得分：0)
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,700" rel="stylesheet"/>
<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css"/>
<link rel="stylesheet" href="source.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<!-- Navigation -->
<nav class="navbar navbar-default bg-secondary fixed-top" style="height:200px" id="mainNav" role="navigation">
<div class="container">
<div class="row">
<p class="navbar-brand font-title col-xl-4 offset-xl-4 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-3 text-center">Chris You</p>
</div>
<div class="row">
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section1">Home</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section2">About Me</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section3">Education</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section4">Skills</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section5">Portfolio</a>
<a class="font-menu col-xl col-lg col-md col-sm text-center" style="color:#d3d3d3" href="#section6">Contact</a>
</div>
</div>
</nav>
<!--image-->
<div class="row" style="margin-top:300px">
<img class="col-xl-2 offset-xl-5 col-lg-4 offset-lg-4 col-md-4 offset-md-4 col-sm-4 offset-sm-4" src="me.gif">
</div>
<!--Description-->
<div class="jumbotron jumbo-header">
<div class="row">
<p class="about-title text-third text-center col-12"><strong>Software Developer</strong></p>
</div>
<p class="about-text text-primary text-left col-xl-4 offset-xl-4 col-lg-7 offset-lg-3 col-md-6 offset-md-3 col-sm-8 offset-sm-2"> Hi! I'm Chris. I am a very passionate software developer based in Detroit, MI. Highly motivated to write clean and effective code. I specialize in Java, C#, C++. Feel free to contact me!</p>
</div>
答案 2 :(得分：0)
如果您使用的是Bootstrap 确保您的容器类是.container-fluid 如果主体容器只是.container，则可以为页脚类设置为.container-fluid的单独容器，并使其样式为=“ padding：0; margin：0”
===================
<body>
<div class="container">
html coding......
</div>
<div class="container-fluid" style="padding:0;margin:0">
<footer>
html coding.......
</footer>
</div>
</body>