为什么导航栏会在移动设备的宽度范围内扩展？

Question

通过在代码开头添加更多代码来编辑问题 为什么导航栏会在移动设备的宽度上延伸？ 对不起，我写的方式，我必须使用翻译。 您好，我在有价目表的网站上有此表。好吧，当你在移动设备上看到它时，所有内容都被扩展到右边，迫使你滚动，扩展屏幕，而不是逐段查看它。我有两个相同的页面，另一个完美，因为我没有＆＃34;价格样式＆＃34;我在代码中显示，所以我认为问题将来自这里，更具体地来自导航栏，因为在设备中它是可以看到的延伸。我不知道为什么在这个页面上导航栏会延伸，特别是它延伸到宽度是链接的按钮，甚至是另一页上的另一种颜色。这个错误会引起什么？我不知道是否应该显示其他代码，但我将其上传到服务器，我看到没有其他样式的错误。

＆＃13;

＆＃13;

/* new styles*/
.navbar {
    margin-bottom: 0;
}

.navbar-brand {
    font-weight: 700;
}


.navbar-brand:focus {
    outline: 0;
}

.nav.navbar-nav {
    background-color: rgba(255,255,255,.6);
}

.navbar-custom.top-nav-collapse .nav.navbar-nav {
    background-color: rgba(0,0,0,0);
}


.navbar-custom ul.nav li a {
	font-size: 16px;
	letter-spacing: 1px;
    color: #444;
	text-transform: uppercase;
	font-weight: 700;
}

.navbar-custom.top-nav-collapse ul.nav li a {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
	color: #fff;
}

.navbar-custom ul.nav ul.dropdown-menu {
	  border-radius: 0;	
	margin-top: 21px;
	border-top: none;
}

.navbar-custom ul.nav li a:hover ul.dropdown-menu {
	    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}


.navbar-custom ul.nav ul.dropdown-menu li {
	border-bottom: 1px solid #f5f5f5;

}

.navbar-custom ul.nav ul.dropdown-menu li:last-child{
	border-bottom: none;
}

.navbar-custom ul.nav ul.dropdown-menu li a {
	padding: 10px 20px;
}

.navbar-custom ul.nav ul.dropdown-menu li a:hover {
	background: #fefefe;
}

.navbar-custom.top-nav-collapse ul.nav ul.dropdown-menu li a {
	color: #666;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}
.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 14px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {outline: 0;}

#container-2{
	background-color: #EBB250;
}
.home-section {
    padding-top: 20px;
    padding-bottom: 20px;
	display:block;
    position:relative;
	z-index:120;
	
}
.home-section2 {
    padding-top: 0px;
    padding-bottom: 20px;
	display:block;
    position:relative;
    z-index:120;
}

.inner-section {
    padding-top: 110px;
    padding-bottom: 110px;
}


.home-section.nopadd-bot {
    padding-bottom: 0;
}


.section-heading h2 {
	font-size: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.section-heading p {
	font-weight: 300;
	font-size: 20px;
	line-height: 1.6em;
}
@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
	
    .intro {
        height: 100%;
        padding: 0;
    }

    .brand-heading {
        font-size: 100px;
    }	
    .intro-text {
        font-size: 25px;
    }
}
@media (max-width:768px) {
	#navigation {
		padding: 20px 0;
	}
	.site-logo{
		margin: 0 0 0 30px;
		float:none;
	}
	.navbar-custom ul.nav li a {
		color: #eee;
	}
	.navbar-custom ul.nav ul.dropdown-menu li {
		border-bottom: 1px solid #aaa;

	}
	.navbar-header {
		margin-top:-40px;
		padding:0;
	}
	.navbar-header button {
		background: #111;
	}
	
	.navbar-header button.navbar-toggle {
		padding: 4px 15px;
		font-size: 14px;
		color: #fff;
	}
	
	.navbar-custom .nav {
		background: #444;
	}
	
	.service-box {
		margin-bottom: 50px;
	}
	
	.team-wrap {
		margin-bottom: 30px;
	}
	
	form#contact-form {
		margin-bottom: 50px;
	}
	
	.xs-marginbot-20 {
		margin-bottom: 20px;
	}

}

@media (max-width:480px) {

	.navbar-custom .nav.navbar-nav {
    background-color: rgba(255,255,255,.4);
	}
	
	.navbar.navbar-custom.navbar-fixed-top {
		margin-bottom: 30px;
	}
}

.navbar .navbar-custom {
	padding: 0;
}
    
    
    
/* estilos del formulario*/
@media  only screen and (min-device-width: 768px) 
{
    .form-container {
      padding: 5%;
      background: #ffffff;
      border: 9px solid #f2f2f2;            
      max-width: 520px;
      margin: auto;
    }

}

h1, p 
{
  text-align: center;
}

input, textarea , button
{
  width: 100%;
}    
textarea
{
  height: 200px;
}
button{
	background-color: #3bbec0 !important;
}

/* estilos de la pagina */

@import "grid.css";
@import "reset.css";
@import "font-awesome.css";
@import "superfish.css";

@import url(//fonts.googleapis.com/css?family=Dosis:400);
@import url(//fonts.googleapis.com/css?family=Dosis:700);

@import url(//fonts.googleapis.com/css?family=Denk+One);

@import url(//fonts.googleapis.com/css?family=Open+Sans:400);
@import url(//fonts.googleapis.com/css?family=Open+Sans:300);
@import url(//fonts.googleapis.com/css?family=Open+Sans:600);
@import url(//fonts.googleapis.com/css?family=Open+Sans:700);
@import url(//fonts.googleapis.com/css?family=Open+Sans:400italic);
html {
    width: auto;

}
a[href^="tel:"] {
 color: inherit;
 text-decoration: none;
}

* {
    -webkit-text-size-adjust: none;
}

body {
    position: relative;
    background-color: #fff;
    color: #908e8e;
    font: 14px/20px 'Open Sans', sans-serif;
}

#container .column {
    /*position: relative !important;*/
    padding-top: 0px !important ;
  }

#works{
	background-color: #A4EB8F;
	padding-top: 10px ;
	padding-bottom: 30px ;
	
}
#works p{
	font-size: 20px ;
}

#informacion h2{
    padding-top: 10px ;
}

.ic {
	border:0;
	float:right;
	background:#fff;
	color:#f00;
	width:50%;
	line-height:10px;
	font-size:10px;
	margin:-220% 0 0 0;
	overflow:hidden;
	padding:0
}

strong {
    font-weight: 700;
}

address {
    font-style: normal;
}

p {
    margin-bottom: 20px;
}

.p1 {
    margin-bottom: 24px;
}

input {
    border-radius: 0 !important;
    outline: none !important;
}

img {
    max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    color: #474343;
    font-weight: normal;
    font-family: 'Denk One', sans-serif;
}

h2 {
    font-size: 60px;
    line-height: 60px;
    padding-top: 83px;
    margin-bottom: 40px;
    text-align: center;
}

h2.head1 {
    font-size: 48px;
    padding-top: 99px;
}

h3  {
    padding-top: 69px;
    margin-bottom: 30px;
    font: 30px/43px 'Dosis', sans-serif;
}

.page1 h3 {
    padding-top: 98px;
    margin-bottom: 15px;
}

h4 {
    font-size: 24px;
    line-height: 40px;
    padding-top: 70px;
    margin-bottom: 34px;
}

h4.head1 {
    padding-bottom: 0px;
    margin-bottom: 30px;
}

h4.head2 {
    padding-bottom: 0px;
    margin-bottom: 14px;
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.list .count {
    margin-top: 4px;
    color: #fff;
    font: 30px/48px 'Dosis', sans-serif;
    width: 49px;
    float: left;
    margin-right: 11px;
    text-align: center;
    height: 49px;
    border-radius: 500px;
    background-color: #25952a;
}

.list li {
    overflow: hidden;
}

.list li+li {
    margin-top: 35px;
}

.list1 {
    margin-top: -3px;
}

.list1 li {
    position: relative;
}

.list1 li+li {
    margin-top: 10px;
}

.list1 li a:after {
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    background-color: #c7c6c6;
    height: 1px;
}

.list1 li a:hover:after {
    background-color: #25952a;
    width: 0;
}

.list2  {
    margin-top: -4px;
}

.list2 li {
    background: url(../img/dots.png) 0 72% repeat-x;
    overflow: hidden;
}

.list2 li+li {
    margin-top: 16px;
}

.list2 .prod {
    float: left;
    padding-right: 3px;
    background-color: #fff;
}

.list2 .price {
    padding-left: 3px;
    float: right;
    background-color: #fff;
}

.list2  {
    overflow: hidden;
}

a{
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: 0.5s ease;
    -o-transition: 0.5s ease;
    -webkit-transition: 0.5s ease;
}

.btn  {
    margin-top: 73px;
    color: #fff;
    display: inline-block;
    padding: 22px 62px 24px;
    background-color: #25952a /*#3da9b6*/;
    font: bold 30px/40px 'Dosis', sans-serif;
}

.btn:hover {
    background-color: #1d1d1d;
}

.link1 {
    display: inline-block;
    margin-top: 16px;
    font: 24px/26px 'Dosis', sans-serif;
    color: #3b3a3a;
}

.paeg1 .link1 {
    margin-top: 14px;
}

.mb__0 {
    margin-bottom: 0px !important;
}
.m0 {
    margin: 0 !important;
}
.pad0 {
    padding: 0 !important;
}

.img_inner {
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.fleft {
    float: left;
    width: auto !important;
    margin-right: 30px;
    margin-bottom: 0px;
    margin-top: 4px;
}

.page1 .fleft {
    margin-top: 8px;
}

.rel {
    position: relative;
}


.oh {
    overflow: hidden;
}
.fright {
    float: right !important;
}
.upp {
    text-transform: uppercase;
}

.alright {
    text-align: right;
}
.center {
    text-align: center;
}
.wrapper, .extra_wrapper {
    overflow: hidden;
}
.clear {
    float: none !important;
    clear: both;
}

.oh {
    overflow: hidden;
}

.nowrap {
    white-space: nowrap;
}


.page1 header h1{
    padding-bottom: 45px;
}
.content {
    padding-bottom: 10px;
    padding-top: 0%;
    margin-top: 0%;
}

.page1 .content {
    padding-bottom: 36px;
}

.text1 {
    color: #6a6a6a;
    margin-top: -21px;
    font: 20px/22px 'Dosis', sans-serif;
    margin-bottom: 26px;
}

.ban_img {
    margin-bottom: 39px;
}
.link22{
    color: #844007;
}

.links a {
    text-decoration: underline;
}

.links li+li {
    margin-top: 10px;
}
.box {
    color: #fff;
    text-align: center;
    display: block;
    background-color: #79c4ca;
    font: 36px/43px 'Dosis', sans-serif;
    margin-bottom: 25px;
}

.box:hover {
    background-color: #1d1d1d;
}

.box_bot  {
    padding-top: 63px;
    padding-bottom: 69px;
}

.box_bot span {
    margin-top: 3px;
    display: block;
    font-size: 30px;
}

.block1 {
    overflow: hidden;
}

.block1+.block1 {
    padding-top: 40px;
}

.sep__1 {
    border-top: 1px solid #d9d9d9;
}

.sep__2 {
    padding-top: 77px;
    border-bottom: 1px solid #d9d9d9;
}

.sep__3 {
    height: 92px;
}
.color1 {
    color: #25952a/*#3da9b6*/;
    font-size: 15px;
}

.color1 a:hover, a.color1:hover {
    color: #474343;
}

.color2 {
    color: #474343;
}

.td_und {
    text-decoration: underline;
}

.top {
    margin-bottom: 61px;
    display: inline-block;
    background: url(../images/totop.png) 0 0 no-repeat;
    width: 82px;
    height: 82px;
    transition: 0s ease;
    -o-transition: 0s ease;
    -webkit-transition: 0s ease;
}

.top:hover {
    background-position: right 0;
}

.copy {
    font-size: 12px;
    line-height: 18px;
}

.sub_copy {
    margin-top: -4px;
}

body {
    min-width: 1200px;
  }
  .container_12 {
      margin-left: auto;
      margin-right: auto;
      width: 1200px;
  }
  .grid_1,
  .grid_2,
  .grid_3,
  .grid_4,
  .grid_5,
  .grid_6,
  .grid_7,
  .grid_8,
  .grid_9,
  .grid_10,
  .grid_11,
  .grid_12 {
      display:inline;
      float: left;
      position: relative;
      margin-left: 15px;
      margin-right: 15px;
      
  }
  .grid_4 li{
      font-size: 16px;
  }

  .grid_4 p{
    font-size: 16px;
}
  
  .push_1, .pull_1,
  .push_2, .pull_2,
  .push_3, .pull_3,
  .push_4, .pull_4,
  .push_5, .pull_5,
  .push_6, .pull_6,
  .push_7, .pull_7,
  .push_8, .pull_8,
  .push_9, .pull_9,
  .push_10, .pull_10,
  .push_11, .pull_11,
  .push_12, .pull_12 {
      position:relative;
  }
  .alpha {
      margin-left: 0;
  }
  
  .omega {
      margin-right: 0;
  }
  .container_12 .grid_4 {
      width:370px;
  }
   
  .clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .clearfix:before,
  .clearfix:after {
    content: '\0020';
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .clearfix {
    zoom: 1;
  }

＆＃13;

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<title>Agrochema</title>
	<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css'>
	<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:700'>
	<link href="https://fonts.googleapis.com/css?family=Arima+Madurai|Cormorant+Upright|Farsan" rel="stylesheet" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

	<div id="navigation">
		<nav class="navbar navbar-custom" role="navigation">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="site-logo">
							<img id="logo" src="../img/logo.png" />
						</div>
					</div>
					<div class="col-md-10">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
								<i class="fa fa-bars"></i>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="menu">
							<ul class="nav navbar-nav navbar-right">
								<li class="active">
									<a href="../index.html">Casa</a>
								</li>
								<li>
									<a href="../galerias.html#about">Sobre mi</a>
								</li>
								<li><a href="../galerias.html">Servicios</a></li>
									<a href="#works">Contacto</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</nav>
	</div>
	<section id="about" class="home-section color-dark bg-white">
		<div class="container marginbot-50">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2">
					<div class="animatedParent">
						<div class="section-heading text-center animated bounceInDown">
							<h2 class="h-bold">Nues</h2>
							<div class="divider-header"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<section class="content">
			<div class="ic"></div>
			<div class="container_12">
				<div class="grid_8">
					<h4 class="head1">Revise nuestros precios</h4>
					<div class="grid_4 alpha">
						<p class="color1">Ponemos a su servicio nuestra larga experiencia y los materiales de primeras marcas. La mayor calidad, al menor precio...</p>
						<ul class="list2">
							<li>
								<div class="prod">
									<a>Mantenimiento mensual</a>
								</div>
								<div class="price">Desde 50€</div>
							</li>
							<li>
								<div class="prod">
									<a>Mantenimiento de comunidades</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de cesped *</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cesped artificial</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de setos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidado de rosales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantas ornamentales </a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Diseño de jardines</a>
								</div>
								<div class="price">Variable...</div>
							</li>

							<li>
								<div class="prod">
									<a>(*)En la plantación de césped natural, le ofrecemos un mes de mantenimiento gratuito, y asegurar su agarre y proliferación.</a>
								</div>
							</li>

						</ul>
					</div>
					<div class="grid_4 omega">
						<p class="color1">Limpieza y desbroce de fincas. Trabajos de campo, especialistas en huerta ecologica.</p>
						<ul class="list2">
							<br>
							<li>
								<div class="prod">
									<a>Sembramos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Cuidamos su huerta</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Arado de fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Rotulamos las fincas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de viñedos</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Siembras ecologicas</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
							<li>
								<div class="prod">
									<a>Plantacion de frutales</a>
								</div>
								<div class="price">10 a 15€ h.</div>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="grid_4">
				<p class="color1">
						<a href="#">Venta de leña, amplia variedad...</a>
					</p>
					<br>
					<p class="color1">
						<a href="#">Servicio de portes </a>
					</p>
					<p class="p1">En Agrochema</p>
				</div>
				<div class="clear"></div>
			</div>
			<div class="sep__2"></div>
			<div class="container_12">
				<div class="grid_4">
					<h3>Trabajos en madera</h3>
					<ul class="list2">
						<li>
							<div class="prod">
								<a>Vallados en madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>

						<li>
							<div class="prod">
								<a>Porches de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Pèrgolas de madera</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Cabañas para herramienta</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>Casetas de animales</a>
							</div>
							<div class="price">10 a 15€ h.</div>
						</li>
						<li>
							<div class="prod">
								<a>(*)Toda la madera que utilizamos es de primera calidad, tratada para aguantar el paso de los años y las inclemencias
									meteorológicas.
								</a>
							</div>
							<!--<div class="price">$80,22</div>-->
						</li>
					</ul>
				</div>
				<div class="grid_4">
					<h3>Nuestro compromiso</h3>
					<ul>
						<li>
							<a>Fiabilidad, innovación y determinación son los valores sobre los que se fundamenta nuestra empresa, el trabajo diario,
								las relaciones con los clientes y en la forma de hacer nuestro trabajo. Los equipos de trabajo nos unen, garantizando
								así que conocimientos y experiencias se compartan y se apliquen en toda las labores; todo ello redunda en nuestros
								clientes. Estos valores son los que nos orientan a implementar constantes mejoras en nuestros productos y a ofrecer
								un buen servicio a nuestros clientes. Viviendo como nuestros estos valores, logramos nuestros objetivos, facilitando
								la tarea de nuestros clientes, trabajadores y al conjunto del sector.
							</a>
						</li>
						<!--<li>
							<a>Expecialistas en jardineria, podas, etc... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc.... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc... </a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>
						<li>
							<a>Expecialistas en jardineria, podas, etc...</a>
						</li>-->
					</ul>
				</div>

				<div class="grid_4">
					<h3>Nuestros objetivos</h3>
					<p>Nuestro objetivo.</p>
				</div>
				<div class="clear"></div>
			</div>
		</section>
	</section>
	<section id="works">
		<div class="container">
			<div class="row">
				<div class="text-center col-md-5 col-sm-12 col-xs-12" id="informacion">
					<p>05400 Arenas de San Pedro</p>
					<p>(Avila)</p>
				</div>

				<div class="col-md-7 col-sm-12 col-xs-12" id="form_container">
					<script src='https://www.google.com/recaptcha/api.js'></script>
					<h5>
						Contacte conmigo
					</h5>
					<form method="post" id="reused_form">
						<label for="name">Nombre:</label>
						<input id="name" type="text" name="Name" required maxlength="50" placeholder="Nombre...">
						<label for="email">Email :</label>
						<input id="email" type="email" name="Email" required maxlength="50" placeholder="Correo electronico...">
						<label for="message">Mensage:</label>
						<textarea id="message" name="Message" rows="10" maxlength="6000" required></textarea>
						<div class="g-recaptcha" data-sitekey="6LfMA0sUAAAAALFN5W-V06LOOeWEUf7T2hVlt5Yu"></div>
						<button class="button-primary" type="submit">Enviar</button>

					</form>
					<div id="success_message" style="display:none">
						<h3>¡¡ El mensaje se envió con éxito...!!</h3>
						<p>Nos pondremos en contacto con usted pronto. </p>
					</div>
					<div id="error_message" style="width:100%; height:100%; display:none; ">
						<h3>Error</h3>Lo sentimos, hubo un error al enviar su formulario.</div>
				</div>
			</div>
		</div>
	</section>
	<section id="contact" class="home-section nopadd-bot color-dark bg-gray text-center">	
	</section>
	<footer>
		<div id="container">
			<div class="column col-md-4">
			</div>
			<div class="column col-md-4">			
			</div>
		</div>
	</footer>
</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可能需要对其进行修改以获得您想要的结果，但问题似乎来自于正文和.container_12上设置的宽度。

您可以将正文设置为最大宽度，并从.container_12中删除宽度：

body {
    max-width: 1200px;
  }
  .container_12 {
      margin-left: auto;
      margin-right: auto;
  }

除非你想要身体100％，否则需要根据需要进一步编辑。

此外，您的媒体查询引用了.form_container类，但HTML将其作为ID #form_container。