[SOLUCIONADO] Scroll horizontal que no tendría que estar

[rodrypaladin]

Buenas, Estaba diseñando a la que me encuentro que la web tiene scroll horizontal... algo tiene que andar mal por el css para que aparezca ese scroll, pego el css de toda la página para ver si vosotros lográis localizarlo

Código CSS:

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
 
header {
    background: #fff;
    padding: 20px;
    margin: -40px 50px -30px 50px;
 
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}
 
header #menu {
    margin-top: 15px;
    display: flex;
    justify-content; center;
    flex-flow: row wrap;
    text-align: center;
    align-items: center;
}
 
header #menu a {
    font-size: 1.3em;
    text-decoration: none;
    color: #666;
    font-weight: bold;
    padding: 10px 20px;
    margin-left: 20px;
    margin-bottom: 10px;
    flex: 1 1;
}
 
header #logo {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
}
 
header #logo h1 {
    font-size: 3em;
}
 
#presentacion {
    background-image: url("bgazul.jpg");
    background-position: bottom;
    background-size: cover;
    margin: 0 -20px 0 -20px;
    padding: 80px 50px;
 
    display: flex;
    flex-flow: column wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
}
 
#presentacion h2 {
    color: #fff;
    font-size: 3.5em;
    margin-top: -5px;
    margin-bottom: -5px;
    font-weight: bold;
    text-shadow: 2px 2px 3px #000000;
    
}
 
#presentacion p {
    text-transform: none;
    font-size: 1.5em;
    font-weight: lighter;
    color: #fff;
    text-shadow: 1px 1px 2px #000000;
    width: 60%;
}
 
#presentacion a {
    text-decoration: none;
    color: #fff;
    background: #E1B63D;
    padding: 15px;
    border: 1px solid #FFF73D;
    
}
 
#servicios {
    max-width: 1024px;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    
}
 
#servicios article {
    background: #F7F7F7;
    padding: 10px 20px;
    width: 25%;
    margin: 10px;
    margin-top: 30px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
 
#servicios article h2 {
    text-align: center;
    font-size: 1.5em;
}
 
#servicios article p {
    text-align: center;
    font-size: .9em;
}
 
#servicios article a {
    margin: 15px 0;
    background: #3342F7;
    border: 1px solid #fff;
    padding: 10px;
    text-decoration: none;
    color: #fff;
}
 

[michellqm]

Hola!

Tendrás alguna página abierta en la que pueda chequear? así a simple vista no puedo decirte exactamente que código te da el problema

Seguramente es un contenedor que con sus margenes se está ensanchando más de lo que debería. Mi recomendación es que uses la herramienta de desarrollador (F12). Haces scroll vertical al máximo y con el puntero de la herramienta puedes ir chequeando que elemento es el que se sale de su margen pues cuando los seleccionan se tornan Azules

Feliz día!

[rodrypaladin]

La cosa es que va por % de la página no por px, si hubiera algún px más alto que el resto lo entendería

[michellqm]

Claro, pero la regla de margin también afectan sacando los elementos de su porcentaje y si hay cuadros dentro de cuadros que tengan margenes los va a empujar, quizás puedas analizar los elementos que tengan esta propiedad

Saludos

[Rafael]

Hay por ahí un margin-left. Tal vez sea eso, y la otra es que en ningún lado pusiste el border-box que ya habíamos comentado.

Recuerda que el margin va por afuera del border-box, así que se suma al 100%.

[rodrypaladin]

tengo puesto

Código CSS:

* {
    box-sizing: border-box
}
 

tal vez lo pondría después de poner aquí el código, pero no lo soluciona, veré los margin left..

EDITO

Solucionado, tenía varios márgenes que se hacían mas grande el documento horizontalmente

en #presentacion y en #precio. las he quitado y perfecto !!

[Rafael]

Yo casi no uso para nada el margin, uso puro padding. De vez en cuando para compensar con un padding, pero casi no. Ya me acostumbré.

De hecho ya hasta en el diseño impreso no veo ya márgenes, sino márgenes interiores. Uno comienza con una hoja de papel y le empieza a quitar márgenes hacia adentro... padding.