Сверстал адаптивно простую страницу: dmink.ru/colors
На мобильном экране 240х320 (Андроид) страница ездит вправо/влево на несколько пикселей. То есть как бы появляется горизонтальная прокрутка.
В чем может быть причина? Фиксированной ширины нигде нет, на других экранах все окей.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Colors - Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<link href="colors.css" rel="stylesheet">
<link href="favicon.png" rel="shortcut icon">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<nav>
<ul class="header-menu">
<li><a href="#products">The Products</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<div class="page-heading">
<h1>join the colors.</h1>
<p>There are only 3 colors, 10 digits</p>
<a class="button" href="#joinnow">join now</a>
</div>
</header>
<section class="description-home">
<h2>There are only 3 colors, 10 digits</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<ul class="colors-example">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</section>
<section class="services-home">
<ul>
<li>
<h3>SEO Optimized</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#seo"></a>
</li>
<li>
<h3>Responsive</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#responsive"></a>
</li>
<li>
<h3>Cloud Services</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make</p>
<a class="button-services" href="#cloudservices"></a>
</li>
</ul>
</section>
<section class="view-more-home">
<p>Music is all of a sudden much<br> more <span>colorful.</span></p>
<a class="button" href="#viewmore">View more</a>
</section>
<footer>
<p>Copyright © 2015 CSS Author</p>
</footer>
</body>
</html>
CSS
html, body,
p, h1, h2, h3, h4, h5, h6,
ul, ol, li,
blockquote, cite {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
p, h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px 0;
}
body {
font-family: "Open Sans", sans-serif;
font-size: 1em;
color: white;
}
header {
height: 30.9375em;
background: url("../colors/background-header.png") no-repeat 50% 0%,
#f74c55;
}
.header-menu {
list-style: none;
margin-right: 12%;
}
.header-menu li {
float: right;
margin: 1.5625em 0 0 0;
}
.header-menu li a {
display: block;
color: white;
text-transform: uppercase;
padding: 0.625em;
}
.header-menu li a:hover,
.button:hover {
opacity: 0.7;
}
.page-heading {
float: right;
margin: 6.875em 19% 0 0;
}
.page-heading h1 {
font-size: 2.5em;
font-weight: normal;
margin: 0 0 0.2em 0;
}
.page-heading p {
margin-bottom: 1.5em;
}
.button {
display: inline-block;
font-size: 1.5em;
color: white;
padding: 0.1em 1.2em 0.3em 1.2em;
border: 2px solid white;
border-radius: 4px;
}
.description-home {
color: #404040;
width: 70%;
margin: 0 auto;
padding: 5.75em 0 6.5em 0;
}
.description-home p {
line-height: 170%;
}
.description-home h2 {
font-size: 1.875em;
font-weight: normal;
color: black;
margin-bottom: 1em;
}
.colors-example {
list-style: none;
}
.colors-example li {
float: left;
width: 2.25em;
height: 2em;
margin: 3.125em 0 0 0;
}
.colors-example li:hover {
opacity: 0.8;
}
.colors-example li:first-child {
background: #ee732f;
}
.colors-example li:nth-child(2) {
background: #f74c55;
}
.colors-example li:nth-child(3) {
background: #2d5f3b;
}
.colors-example li:nth-child(4) {
background: #404040;
}
.colors-example li:last-child {
background: #fb636b;
}
.services-home {
display: table;
}
.services-home ul {
display: table-row;
list-style: none;
}
.services-home li {
display: table-cell;
width: 33.333%;
line-height: 170%;
padding: 2em 4% 2.2em 4%;
box-sizing: border-box;
}
.services-home li:first-child {
background: #404040;
}
.services-home li:first-child h3 {
background: url("../colors/services-seo.png") no-repeat 0 50%;
}
.services-home li:nth-child(2) {
width: 33.334%;
background: #f74c55;
}
.services-home li:nth-child(2) h3 {
background: url("../colors/services-responsive.png") no-repeat 0 50%;
}
.services-home li:last-child {
background: #2d5f3b;
}
.services-home li:last-child h3 {
background: url("../colors/services-cloud.png") no-repeat 0 50%;
}
h3 {
font-weight: normal;
font-size: 1.375em;
padding: 0.4em 0 0.4em 2.14em;
}
.button-services {
float: right;
width: 2.25em;
height: 2em;
background: url("../colors/bg-button.png") no-repeat 50% 50%,
rgba(0, 0, 0, 0.3);
}
.button-services:hover {
background: url("../colors/bg-button.png") no-repeat 50% 50%,
rgba(0, 0, 0, 0.15);
}
.view-more-home {
text-align: center;
height: 31.75em;
width: 100%;
padding-top: 10em;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% 50%;
box-sizing: border-box;
}
.view-more-home p {
font-size: 2.65em;
margin: 0 0 0.7em 0;
}
.view-more-home span {
font-weight: bold;
}
footer {
color: black;
text-align: center;
padding: 1.625em 0 1em 0;
background: white;
}
nav::after,
.header-menu::after,
.colors-example::after,
.services-home ul::after,
.services-home li::after,
.page-heading::after,
.button-services::after {
display: block;
content: "";
clear: both;
}
/* ----------------------- Responsive Web Design ----------------------- */
@media screen and (max-width: 1024px) {
.page-heading {
margin: 6.875em 13% 0 0;
}
}
@media screen and (max-width: 768px) {
header {
height: 25em;
background: url("../colors/background-header.png") no-repeat 36% 0%,
#f74c55;
}
.header-menu {
margin-right: 3%;
}
.page-heading {
margin: 6.875em 8% 0 0;
}
.description-home {
width: 84%;
padding: 2.75em 0 3em 0;
}
.description-home h2 {
font-size: 1.6em;
}
.colors-example li {
margin: 2em 0 0 0;
}
.services-home {
display: block;
}
.services-home ul {
display: block;
}
.services-home li {
display: block;
width: 100%;
padding-bottom: 1.5em;
}
.services-home li:nth-child(2) {
width: 100%;
}
.view-more-home {
height: 22em;
padding: 6em 0.4em 0 0.4em;
background: url("../colors/colors-line.jpg") repeat-x 0 100%,
url("../colors/bg-view-more.jpg") no-repeat 50% 50%;
}
.view-more-home p {
font-size: 2em;
}
}
@media screen and (max-width: 640px) {
header {
height: 23em;
background: url("../colors/background-header.png") no-repeat 34% 0%,
#f74c55;
}
.page-heading {
margin: 5em 7% 0 0;
}
}
@media screen and (max-width: 480px) {
header {
height: 21em;
background: url("../colors/background-header.png") no-repeat 32% 0%,
#f74c55;
}
.page-heading {
margin: 3em 5% 0 0;
}
.header-menu li {
margin: 4em 0 0 0;
}
.description-home {
width: 90%;
padding: 2em 0 2em 0;
}
.description-home h2 {
font-size: 1.5em;
}
.colors-example li {
margin: 1em 0 0 0;
}
.view-more-home {
height: 19em;
padding: 5em 0.4em 0 0.4em;
}
.view-more-home p {
font-size: 1.6em;
}
.button {
font-size: 1.2em;
padding: 0.1em 1.2em 0.3em 1.2em;
}
footer {
padding: 1em 0 0.375em 0;
}
}
@media screen and (max-width: 328px) {
header {
height: 20em;
background: url("../colors/background-header.png") no-repeat 29% 0%,
#f74c55;
}
.header-menu {
font-size: 0.85em;
margin-right: 1%;
}
.header-menu li {
margin: 5em 0 0 0;
}
.header-menu li a {
font-weight: bold;
padding: 0.5em;
}
.page-heading {
margin: 2em 5% 0 0;
}
.description-home h2 {
font-size: 1.3em;
}
.services-home li {
padding: 1em 4% 0.7em 4%;
}
.view-more-home {
height: 19em;
padding: 5em 0.4em 0 0.4em;
}
.view-more-home p {
font-size: 1.4em;
}
.button {
font-size: 1em;
padding: 0.1em 1.2em 0.3em 1.2em;
}
footer {
font-size: 0.9em;
padding: 0.725em 0 0.175em 0;
}
}
@media screen and (min-width: 1366px) {
header {
height: 25.8em;
font-size: 1.2em;
background: url("../colors/background-header.png") no-repeat 62% 0%,
#f74c55;
}
.page-heading {
margin: 6.875em 26% 0 0;
}
.description-home p,
.services-home li {
font-size: 1.2em;
}
}
@media screen and (min-width: 1600px) {
.page-heading {
margin: 6.5em 28% 0 0;
}
.description-home p,
.services-home li {
font-size: 1.3em;
}
.colors-example li {
width: 2.925em;
height: 2.6em;
}
.view-more-home {
padding-top: 8em;
}
.view-more-home p {
font-size: 3em;
}
.view-more-home .button {
font-size: 2em;
}
footer {
font-size: 1.2em;
padding: 1.625em 0 1em 0;
}
}
@media screen and (min-width: 1920px) {
header {
height: 23.8em;
font-size: 1.3em;
}
.page-heading {
margin: 5.4em 29% 0 0;
}
.header-menu {
margin-right: 15%;
}
.description-home p,
.services-home li {
font-size: 1.4em;
}
.description-home h2 {
font-size: 2.2em;
}
.view-more-home p {
font-size: 3.2em;
}
.view-more-home .button {
font-size: 2em;
}
footer {
font-size: 1.3em;
}
}