html页面上约50px宽的白框不知道它来自哪里
在文档的右边有一个大约50px宽的列，我不知道它来自哪里，我已经检查了我的html和css三倍，无法找到它生成的位置。
这是我的HTML：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="?.?">
<meta name="author" content="?.?">
<meta property="og:title" content="Sitio Web de Balam Tech">
<meta property="og:image" content="assets/img/balamtech-logo.png">
<meta property="og:site_mame" content="Balam Tech">
<meta property="og:description" content="?.?">
<title>Balam Tech - Inicio</title>
<link rel="stylesheet" type="text/css" href="assets/libs/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/main.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<a href="index.html" class="navbar-brand"><img class="topbar-thumbnail" src="assets/img/balamtech-logo.png" alt="Balam Tech Logo"> Balam Tech</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".mainNavbar">
<span class="glyphicon glyphicon-th-large"></span>
</button>
<div class="collapse navbar-collapse mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active-tab"><a href="#quien">¿Quiénes somos?</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contact">Contáctanos</a></li>
<li><a href="#login">Login</a></li>
<li><a href="#registrate">Regístrate</a></li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-12">
<div class="jumbotron jumbotron-main-page" role="main">
<div class="container space-top-jumbotron-main-page text-center">
<h1>Balam Tech</h1>
<p>Productos y Servicios de Primera Calidad</p>
<a href="#" class="btn btn-primary btn-lg">Contáctanos</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container" id="quien">
<div class="col-md-12">
<h2 class="text-center">¿Quiénes somos?</h2>
<div style="height: 40px;"></div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<img src="assets/img/balamtech-logo.png" alt="logo de Balam Tech" title="Balam Tech" class="img-logo-main-page">
</div>
<div class="col-md-9">
<h3>Balam Tech</h3>
<article class="text-main-page">
<p><b>Balam Tech</b> es una empresa que pertene a Grupo San Martín.</p>
<p><b>Balam Tech</b> se dedicada a prestar servicios de desarrollo de software web y
a la venta de productos de software genérico. Más Información en la sección de servicios y productos.</p>
<p>Puedes ponerte en contacto con nosotros al correo
<b><a href="mailto:info@balamtech.com">info@balamtech.com</a></b></p>
</article>
<a href="#" class="btn btn-lg btn-primary pull-right">Leer Más</a>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<div style="height: 70px;"></div>
<div class="second-tier">
<div class="row">
<div class="container">
<div class="col-md-12">
<h2 class="text-center">Nuestros Servicios</h2>
<div style="height: 40px;"></div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-3">
<h3 class="text-center">Software Web a la Medida</h3>
<article class="text-main-page">
<p>Nosotros desarrollamos <b>Software Web</b> con los estándares más altos, con
tecnología de punta y con escalabilidad horizontal y vertical.</p>
<p>El <b>Software Web</b> te ofrece la ventaja de ser compatible con muchos de los dispositivos
que se utilizan hoy en día. ¿Smartphones, tabletas, ipads?, No te preocupes, te tenemos
cubierto.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Portales y Plataformas Web</h3>
<article class="text-main-page">
<p>Hoy en día los portales y plataformas empresariales y de negocios son un indicio del
grado de calidad y profesionalidad que una empresa, compañia o institución posee.</p>
<p>Nuestros desarrolladores y diseñadores se encargan de que tu empresa tenga una imágen
estrictamente profesional y seria en la Web.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Diseño de Correos Electrónicos</h3>
<article class="text-main-page">
<p>Siempre hay una razón para mandar un correo a un cliente, a un contacto, a una empresa, etc.</p>
<p>Se vuelve un problema poder visualizar de manera uniforme un correo al haber tantos dispositivos
y resoluciones diferentes en el mercado.</p>
<p>Nosotros te ofrecemos una solución que las grandes empresas internacionales utilizan: Diseño de Correo Electrónico Responsivo.</p>
</article>
</div>
<div class="col-md-3">
<h3 class="text-center">Desarrollo de Aplicaciones Móviles</h3>
<article class="text-main-page">
<p>Hoy en día, mas del 50% de la audiencia que visita un sitio o aplicación web
lo hace desde un dispositivo móvil, es decir un smartphone o tableta.</p>
<p>El diseño responsivo es una solución bastante útil, pero muchas veces, es
el grado de complejidad de el sitio o aplicación requiere de mayor especialización,
para el cual te ofrecemos otra solución: <b>Aplicaciones Móviles.</b></p>
</article>
</div>
</div>
</div>
<div style="height: 30px;"></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<img src="assets/img/techs.png" class="img-tech-main">
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div style="height: 50px;"></div>
<h2 class="text-center">Contáctanos</h2>
<hr>
<div style="height: 40px;"></div>
<div class="col-md-4">
<img src="assets/img/androidmessage.png" class="icon-message pull-left">
</div>
<div class="col-md-8">
<form method="post" role="form" class="text-center">
<div class="form-group">
<label class="control-label" for="uname">Nombre</label>
<input type="text" class="form-control input-lg" id="uname" name="uname" placeholder="nombre">
</div>
<div class="form-group">
<label class="control-label" for="uemail">Correo</label>
<input type="email" class="form-control input-lg" id="uemail" name="uemail" placeholder="correo electrónico">
</div>
<div class="form-group">
<label class="control-label" for="uempresa">Empresa</label>
<input type="email" class="form-control input-lg" id="uempresa" name="uempresa" placeholder="empresa">
</div>
<div class="form-group">
<label class="control-label" for="umensaje">Mensaje</label>
<textarea class="form-control" id="umensaje" name="umensaje" placeholder="mensaje..."></textarea>
</div>
<button type="submit" class="btn btn-success btn-lg pull-right">Enviar Mensaje</button>
</form>
</div>
</div>
</div>
<footer class="footer">
</footer>
<script src="assets/libs/js/jquery.min.js"></script>
<script src="assets/libs/js/bootstrap.min.js"></script>
</body>
</html>
这是我的css：
@import url(http://fonts.googleapis.com/css?family=Roboto);
body, html{
font-family: 'Roboto', sans-serif !important;
height: 100% !important;
width: 100% !important;
}
.jumbotron-main-page{
background: url('../img/bg.jpg') 50% 50% fixed no-repeat;
background-size: cover;
box-shadow: 1px 1px 25px #999;
color: #fff;
}
.jumbotron-main-page h1{
text-shadow: 1px 3px #333;
}
.jumbotron-main-page p{
text-shadow: 1px 3px #333;
}
.icon-message{
width: 256px !important;
height: 256px !important;
position: absolute;
top: 20%;
margin-top: 60px;
}
.topbar-thumbnail{
width: 36px;
height: auto;
margin-top: -7px;
}
.text-main-page{
margin: 20px;
font-size: 1.2em;
text-align: justify;
}
.active-tab{
border-bottom: #93c840 5px solid;
}
.second-tier{
box-shadow: 1px 1px 10px #333;
background-color: #ededed;
}
.jumbotron-no-support{
background-color: #fff;
border: 5px #999 solid;
}
.no-support-panel-text{
text-align: justify;
font-size: 1.2em;
}
.img-tech-main{
display: block;
margin-left: auto;
margin-right: auto;
}
.btn-no-support{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 15px;
width: 200px;
content: '';
}
.frowny-face{
text-align: center;
font-size: 130px;
color: #919191;
line-height: 1.1;
margin-top: 0px;
margin-bottom: 50px;
}
.img-tech-main{
width: 960px !important;
height: auto !important;
}
.web-explorer-thumbnail{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.img-logo-main-page{
width: 250px;
height: 250px;
margin-top: -20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.footer{
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
.img-logo-main-page{
display: none;
}
.img-tech-main{
display: none;
}
.icon-message{
display: none;
}
}
@media only screen and (min-width : 1224px) {
.jumbotron-main-page{
height: 450px;
min-height: 300px;
max-height: 450px;
}
.space-top-jumbotron-main-page{
margin-top: 50px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.img-tech-main{
display: none;
}
.img-logo-main-page{
display: none;
}
.icon-message{
display: none;
}
}
这是一张它的样子：
如果有人知道为什么会出现这个框架，请告诉我如何修复它！
2 个答案:
答案 0 :(得分：0)
浏览器会自动为正文添加边距，因此您需要通过将边距设置为0来删除它。
body {
margin: 0;
}
这将删除垂直滚动条。
为了找到导致空白区域向右的原因，您可以使用浏览器内置工具。我可以在Firefox上右键单击页面并选择“Inspect element”来获取有关它的信息，并选择差异元素来选择元素开始改变大小的位置。
如果您希望我找到它，那么通过指向该页面的链接会更好。我尝试了你的代码，但我没有得到与屏幕截图相同的结果。
答案 1 :(得分：-2)
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？