title: Why the background's width shrinks if i shrink browser's screen?
body: <p>I faced one mysterious problem. I have a website and it looks on regular screen like I want it looks. But the problem in <code>footer</code> (but it's called <code>header</code> in code). So when I shrink the browser or view it on a phone that footer shrinks own width of background color three time as much.</p>
  
  <p><img src="https://i.stack.imgur.com/jTBPp.jpg" alt="enter image description here"></p>
  
  <p>I tried to empty all that block because I thought something inside could bother but no. As well I tried to set up <code>min-width</code> and <code>width</code> in <code>vw</code> but these don't work( I have not idea about a solution so i need your help guys! Thanks!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* line 1, ../sass/screen.scss */
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
  }
  
  /* line 62, ../sass/screen.scss */
  body {
    background: url(../img/bg.jpg) no-repeat;
    background-size: cover;
  }
  
  /* line 74, ../sass/screen.scss */
  .back {
    position: fixed;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: red;
    text-align: center;
    z-index: 9999999999;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
  }
  /* line 84, ../sass/screen.scss */
  .back:hover {
    width: 50px;
    height: 50px;
  }
  /* line 88, ../sass/screen.scss */
  .back:hover p {
    line-height: 50px;
  }
  /* line 91, ../sass/screen.scss */
  .back p {
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    line-height: 40px;
    font-size: 15px;
    color: white;
  }
  
  /* line 99, ../sass/screen.scss */
  .container {
    width: 1070px;
    height: auto;
    margin: 0 auto;
    padding: 0 10px;
  }
  
  /* line 105, ../sass/screen.scss */
  .upper {
    width: 100%;
    height: 130px;
    position: relative;
  }
  /* line 109, ../sass/screen.scss */
  .upper img {
    position: absolute;
    left: 0;
    width: 238px;
    height: 37px;
    top: 50%;
    margin-top: -20px;
  }
  /* line 117, ../sass/screen.scss */
  .upper ul {
    height: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -15px;
  }
  /* line 123, ../sass/screen.scss */
  .upper ul li {
    list-style-type: none;
    display: inline-block;
    margin: 0 15px;
    height: 30px;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
  }
  /* line 129, ../sass/screen.scss */
  .upper ul li:hover {
    background: white;
  }
  /* line 132, ../sass/screen.scss */
  .upper ul li:hover a {
    color: #1B1B2D;
  }
  /* line 135, ../sass/screen.scss */
  .upper ul li a {
    font-size: 17px;
    font-family: ColaThin;
    font-weight: 700;
    color: white;
    line-height: 52px;
    text-decoration: none;
    line-height: 30px;
    padding-left: 20px;
    padding-right: 20px;
  }
  
  /* line 145, ../sass/screen.scss */
  .owl-pagination {
    display: none !important;
  }
  
  /* line 149, ../sass/screen.scss */
  .owl-theme .owl-controls .owl-buttons {
    position: absolute;
    width: 100%;
    top: 30%;
  }
  
  /* line 155, ../sass/screen.scss */
  .owl-wrapper-outer {
    position: relative;
    width: 100%;
  }
  /* line 158, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) {
    position: relative;
    background: url(../img/ipad.png) no-repeat;
    background-position: 70% 0;
    width: 100%;
    height: 400px;
  }
  /* line 164, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text {
    position: absolute;
    right: 65%;
    padding-top: 50px;
  }
  /* line 168, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text p {
    text-align: right;
  }
  /* line 171, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text .p-1 {
    color: #e7e8ea;
    font-family: ColaBold;
    font-size: 45px;
    font-weight: 700;
    line-height: 52px;
    text-transform: uppercase;
  }
  /* line 179, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text .p-2 {
    color: #d7d7e3;
    font-family: AlexReg;
    font-size: 39px;
    line-height: 52px;
    font-weight: 400;
  }
  /* line 186, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text .p-3 {
    color: #d7d7e3;
    font-family: AlexReg;
    font-size: 39px;
    line-height: 52px;
    font-weight: 700;
  }
  /* line 193, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text .p-4 {
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 23px;
    font-weight: 100;
  }
  /* line 200, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text a input {
    color: white;
    font-family: ColaReg;
    font-size: 23px;
    font-weight: 500;
    width: 181px;
    height: 45px;
    float: right;
    margin-top: 35px;
    box-shadow: 0 60px 30px -15px rgba(0, 0, 0, 0.4);
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    background: linear-gradient(to top, #164182 0%, #2d6bc2 100%);
    background: -webkit-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
    background: -moz-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
    background: -o-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
    background: -ms-linear-gradient(to top, #164182 0%, #2d6bc2 100%);
    cursor: pointer;
  }
  /* line 213, ../sass/screen.scss */
  .owl-wrapper-outer div:not(.text) .text a input:hover {
    background: linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
    background: -webkit-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
    background: -moz-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
    background: -o-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
    background: -ms-linear-gradient(to top, #12366c 0%, #2d6bc2 100%);
  }
  
  /* line 222, ../sass/screen.scss */
  .content {
    text-align: center;
  }
  /* line 224, ../sass/screen.scss */
  .content .block1 {
    text-align: right;
  }
  /* line 227, ../sass/screen.scss */
  .content .block2, .content .block3, .content .block1, .content .block4 {
    margin-left: 9px;
    margin-right: 9px;
  }
  /* line 231, ../sass/screen.scss */
  .content .block {
    display: inline-block;
    width: 240px;
    height: 175px;
    line-height: 155px;
    border-radius: 5px;
    -ms-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border: 3px solid white;
    background: linear-gradient(top, white, #ccc);
    background: -webkit-linear-gradient(top, white, #ccc);
    background: -moz-linear-gradient(top, white, #ccc);
    background: -o-linear-gradient(top, white, #ccc);
    background: -ms-linear-gradient(top, white, #ccc);
    opacity: .7;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
  }
  /* line 241, ../sass/screen.scss */
  .content .block:hover {
    opacity: 1;
  }
  /* line 244, ../sass/screen.scss */
  .content .block img {
    vertical-align: middle;
  }
  /* line 247, ../sass/screen.scss */
  .content .block p {
    text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
    -moz-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
    -ms-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
    -o-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
    -webkit-text-shadow: 0.5px 0.9px 0 rgba(255, 255, 255, 0.75);
    color: #8c8c92;
    font-family: Calibri;
    font-size: 19px;
    font-weight: 400;
    line-height: 0;
    text-align: center;
    margin-top: -5px;
  }
  /* line 258, ../sass/screen.scss */
  .content .block3 img {
    margin-right: -25px;
  }
  
  /* line 262, ../sass/screen.scss */
  .text-box {
    display: inline-block;
    width: 33%;
    margin-top: 40px;
  }
  /* line 266, ../sass/screen.scss */
  .text-box img {
    float: left;
    margin-top: 5px;
  }
  /* line 270, ../sass/screen.scss */
  .text-box h3 {
    margin-left: 45px;
    color: #505050;
    font-family: ColaThin;
    font-size: 25px;
    font-weight: 600;
    line-height: 23px;
  }
  /* line 278, ../sass/screen.scss */
  .text-box p {
    font-size: 14px;
    font-family: ColaReg;
    font-weight: 400;
    color: #505050;
    line-height: 20px;
  }
  /* line 281, ../sass/screen.scss */
  .text-box p:first-of-type {
    margin-left: 45px;
  }
  /* line 284, ../sass/screen.scss */
  .text-box p:last-of-type {
    margin-top: 20px;
  }
  
  /* line 289, ../sass/screen.scss */
  .main-content {
    position: relative;
    height: auto;
    text-align: center;
  }
  /* line 293, ../sass/screen.scss */
  .main-content h3 {
    text-align: center;
    margin-top: 40px;
    font-size: 27px;
    font-family: ColaReg;
    font-weight: 400;
    color: #505050;
    line-height: 23px;
  }
  /* line 298, ../sass/screen.scss */
  .main-content img {
    float: left;
    display: block;
  }
  /* line 302, ../sass/screen.scss */
  .main-content ul {
    margin-top: 20px;
    margin-left: 420px;
  }
  /* line 305, ../sass/screen.scss */
  .main-content ul li {
    font-size: 15px;
    font-family: ColaReg;
    font-weight: 400;
    color: #828181;
    line-height: 30px;
    list-style-image: url(../img/list.jpg);
  }
  /* line 310, ../sass/screen.scss */
  .main-content input {
    clear: both;
    display: inline-block;
    width: 130px;
    height: 34px;
    background: #2d6bc2;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    font-size: 19px;
    font-family: ColaReg;
    font-weight: 400;
    color: white;
    line-height: 23px;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    cursor: pointer;
    margin: 0 15px;
    margin-top: 20px;
  }
  /* line 322, ../sass/screen.scss */
  .main-content input:hover {
    background: #2860ad;
  }
  
  /* line 328, ../sass/screen.scss */
  .main-content-2 {
    width: 100%;
    height: auto;
  }
  /* line 331, ../sass/screen.scss */
  .main-content-2 ul {
    margin-top: 50px;
  }
  /* line 333, ../sass/screen.scss */
  .main-content-2 ul li:first-child {
    border: none !important;
  }
  /* line 336, ../sass/screen.scss */
  .main-content-2 ul li {
    list-style-image: url(../img/list2.jpg);
    font-size: 15px;
    font-family: ColaReg;
    font-weight: 400;
    color: #828181;
    line-height: 35px;
    border-top: 1px solid #ccc;
  }
  
  /* line 344, ../sass/screen.scss */
  header {
    width: 100%;
    height: 340px;
    background: linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
    background: -webkit-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
    background: -moz-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
    background: -o-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
    background: -ms-linear-gradient(to top, #3D3D4F -50%, #5C5C73 150%);
    margin-top: 30px;
  }
  /* line 349, ../sass/screen.scss */
  header .upper {
    height: 85px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
    position: relative;
    vertical-align: middle;
    display: table;
  }
  /* line 357, ../sass/screen.scss */
  header .upper .twitter {
    background: white;
    height: 65px;
    width: 65px;
    float: left;
    margin-top: 11px;
    display: table-cell;
    border-radius: 50px;
    -ms-border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
  }
  /* line 366, ../sass/screen.scss */
  header .upper .twitter:hover {
    background: #0099e8;
  }
  /* line 369, ../sass/screen.scss */
  header .upper .twitter:hover i {
    color: white;
  }
  /* line 372, ../sass/screen.scss */
  header .upper .twitter i {
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    color: #49495C;
    line-height: 65px;
    display: table-cell;
    width: 65px;
    vertical-align: middle;
    font-size: 40px;
    text-align: center;
  }
  /* line 383, ../sass/screen.scss */
  header .upper p {
    font-size: 15px;
    font-family: ColaThin;
    font-weight: 400;
    color: white;
    line-height: 25px;
    opacity: .8;
    padding-left: 80px;
    vertical-align: middle;
    display: table-cell;
  }
  
  /* line 393, ../sass/screen.scss */
  .first {
    width: 49%;
    height: auto;
    display: inline-block;
    float: left;
  }
  /* line 398, ../sass/screen.scss */
  .first h3 {
    color: white;
    font-family: ColaReg;
    font-size: 25px;
    font-weight: 300;
    line-height: 23px;
    margin-top: 20px;
  }
  /* line 406, ../sass/screen.scss */
  .first p {
    color: white;
    opacity: .8;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    margin-top: 15px;
  }
  /* line 415, ../sass/screen.scss */
  .first input[type="text"] {
    margin-top: 20px;
    background: #242439;
    box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    width: 213px;
    height: 28px;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    padding-left: 5px;
    padding-right: 5px;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    float: left;
    /* Firefox 19+ */
    /* Firefox * Firefox 18- */
  }
  /* line 430, ../sass/screen.scss */
  .first input[type="text"]::-moz-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 438, ../sass/screen.scss */
  .first input[type="text"]:-moz-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 446, ../sass/screen.scss */
  .first input[type="text"]:-ms-input-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 454, ../sass/screen.scss */
  .first input[type="text"]::-webkit-input-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 463, ../sass/screen.scss */
  .first .social {
    float: left;
    margin-top: 15px;
  }
  /* line 466, ../sass/screen.scss */
  .first .social div:nth-of-type(2) {
    margin-left: 25px;
    margin-right: 25px;
  }
  /* line 470, ../sass/screen.scss */
  .first .social div {
    width: 50px;
    height: 50px;
    background: white;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    -ms-border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    -o-border-radius: 50px;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    cursor: pointer;
  }
  /* line 480, ../sass/screen.scss */
  .first .social div:hover {
    background: #0099e8;
  }
  /* line 483, ../sass/screen.scss */
  .first .social div:hover i {
    color: white;
  }
  /* line 486, ../sass/screen.scss */
  .first .social div i {
    font-size: 23px;
    color: #4D4D62;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
  }
  /* line 493, ../sass/screen.scss */
  .first input[type="button"] {
    color: #363648;
    margin-top: 20px;
    margin-left: 230px;
    font-family: ColaReg;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    background: #e7e8ea;
    width: 85px;
    height: 27px;
    cursor: pointer;
    display: block;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
  }
  /* line 508, ../sass/screen.scss */
  .first input[type="button"]:hover {
    background: #ccced2;
  }
  /* line 512, ../sass/screen.scss */
  .first div {
    display: inline-block;
    margin-top: 20px;
    clear: both;
  }
  
  /* line 519, ../sass/screen.scss */
  .second {
    width: 49%;
    display: inline-block;
    height: auto;
    float: right;
  }
  /* line 525, ../sass/screen.scss */
  .second form h3 {
    color: white;
    font-family: ColaReg;
    font-size: 25px;
    font-weight: 300;
    line-height: 23px;
    margin-top: 20px;
  }
  /* line 533, ../sass/screen.scss */
  .second form input[type="text"]:first-of-type {
    margin-top: 20px;
  }
  /* line 536, ../sass/screen.scss */
  .second form input[type="text"] {
    padding-left: 5px;
    padding-right: 5px;
    width: 213px;
    height: 28px;
    background: #242439;
    box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    width: 213px;
    height: 28px;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    margin-bottom: 18px;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    /* Firefox 19+ */
    /* Firefox * Firefox 18- */
  }
  /* line 552, ../sass/screen.scss */
  .second form input[type="text"]::-moz-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 560, ../sass/screen.scss */
  .second form input[type="text"]:-moz-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 568, ../sass/screen.scss */
  .second form input[type="text"]:-ms-input-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 576, ../sass/screen.scss */
  .second form input[type="text"]::-webkit-input-placeholder {
    opacity: 0.2;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
  }
  /* line 585, ../sass/screen.scss */
  .second form textarea {
    margin-top: 20px;
    float: right;
    background: #242439;
    box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -ms-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -o-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 1px 1.7px 3px rgba(0, 0, 0, 0.75);
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    color: #e7e8ea;
    font-family: ColaThin;
    font-size: 14px;
    font-weight: 300;
    max-width: 280px;
    max-height: 120px;
    padding-left: 5px;
    padding-top: 5px;
  }
  /* line 600, ../sass/screen.scss */
  .second form input[type='submit'] {
    color: #363648;
    font-family: ColaReg;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
    background: #e7e8ea;
    width: 85px;
    height: 27px;
    cursor: pointer;
    display: block;
    border-radius: 7px;
    -ms-border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    -o-border-radius: 7px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    float: right;
  }
  /* line 614, ../sass/screen.scss */
  .second form input[type='submit']:hover {
    background: #ccced2;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="upper"&gt;
    &lt;img src="img/logo.png" alt="" /&gt;
    &lt;ul&gt;
     &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;iPad apps&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Demostrations&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Leopards media&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href=""&gt;Connect us&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
    &lt;div class="owl-carousel"&gt;
      &lt;div&gt;&lt;div class="text"&gt;&lt;p&gt;&lt;span class="p-1"&gt;DUBLIN'S&lt;/span&gt;&lt;br&gt;&lt;span class="p-2"&gt;iPad &lt;span class="p-3"&gt;Apps&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class="p-4"&gt;Free and paid apps&lt;br&gt;for your iPad&lt;/span&gt;&lt;/p&gt;
      &lt;a href="#"&gt;&lt;input type="button" value="Read more"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div&gt;&lt;div class="text"&gt;&lt;p&gt;&lt;span class="p-1"&gt;DUBLIN'S&lt;/span&gt;&lt;br&gt;&lt;span class="p-2"&gt;iPad &lt;span class="p-3"&gt;Apps&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class="p-4"&gt;Free and paid apps&lt;br&gt;for your iPad&lt;/span&gt;&lt;/p&gt;
       &lt;a href="#"&gt;&lt;input type="button" value="Read more"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
       &lt;div&gt;&lt;div class="text"&gt;&lt;p&gt;&lt;span class="p-1"&gt;DUBLIN'S&lt;/span&gt;&lt;br&gt;&lt;span class="p-2"&gt;iPad &lt;span class="p-3"&gt;Apps&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class="p-4"&gt;Free and paid apps&lt;br&gt;for your iPad&lt;/span&gt;&lt;/p&gt;
        &lt;a href="#"&gt;&lt;input type="button" value="Read more"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
        &lt;div&gt;&lt;div class="text"&gt;&lt;p&gt;&lt;span class="p-1"&gt;DUBLIN'S&lt;/span&gt;&lt;br&gt;&lt;span class="p-2"&gt;iPad &lt;span class="p-3"&gt;Apps&lt;/span&gt;&lt;/span&gt;&lt;br&gt;&lt;span class="p-4"&gt;Free and paid apps&lt;br&gt;for your iPad&lt;/span&gt;&lt;/p&gt;
         &lt;a href="#"&gt;&lt;input type="button" value="Read more"&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
    &lt;div class="content"&gt;
     &lt;a href="#"&gt;&lt;div class="block1 block"&gt;&lt;img src="img/block-1.png" alt=""&gt;&lt;p&gt;E Book Reader Pro&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;div class="block2 block"&gt;&lt;img src="img/block-2.png" alt=""&gt;&lt;p&gt;Image viewer pro&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;div class="block3 block"&gt;&lt;img src="img/block-3.png" alt=""&gt;&lt;p&gt;Media manager&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
     &lt;a href="#"&gt;&lt;div class="block4 block"&gt;&lt;img src="img/block-4.png" alt=""&gt;&lt;p&gt;Leo Entertainment&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
    &lt;/div&gt;
     &lt;div class="text-box1 text-box"&gt;&lt;img src="img/icon1.png" alt="" /&gt;&lt;h3&gt;Discover Apps&lt;/h3&gt;&lt;p&gt;Lorem Ipsum is simply dummy&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="text-box2 text-box"&gt;&lt;img src="img/icon2.png" alt="" /&gt;&lt;h3&gt;Browse Apps&lt;/h3&gt;&lt;p&gt;Lorem Ipsum is simply dummy&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.&lt;/p&gt;&lt;/div&gt;
     &lt;div class="text-box3 text-box"&gt;&lt;img src="img/icon3.png" alt="" /&gt;&lt;h3&gt;Development&lt;/h3&gt;&lt;p&gt;Lorem Ipsum is simply dummy&lt;/p&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum laboriosam maiores maxime blanditiis neque error aliquid sint molestias.&lt;/p&gt;&lt;/div&gt;
    &lt;div class="main-content"&gt;
     &lt;h3&gt;There are many variations of passages&lt;/h3&gt;
     &lt;img src="img/ipad2.png" alt=""&gt;
     &lt;ul&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias corrupti quos sequi sint iure, neque.&lt;/li&gt;
     &lt;/ul&gt;
     &lt;input type="button" value="Read More"&gt;
     &lt;input type="submit" value="Download"&gt;
    &lt;/div&gt;
    &lt;div class="main-content-2"&gt;
     &lt;ul&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam obcaecati doloremque quaerat, quidem!&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, possimus.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil provident blanditiis odit, accusamus commodi aspernatur doloribus culpa.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet.&lt;/li&gt;
      &lt;li&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem.&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
   &lt;header&gt;
    &lt;div class="container"&gt;
     &lt;div class="upper"&gt;
      &lt;a class="twitter" href="#"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit in recusandae quaerat dolor mollitia,&lt;br&gt;
        laborum veritatis hic, eveniet placeat reiciendis non inventore!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="first"&gt;
       &lt;h3&gt;Newsletter&lt;/h3&gt;
       &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus quae
         ex delectus minima esse corrupti voluptatum repellendus quasi culpa nam.&lt;/p&gt;
         &lt;input type="text" placeholder="Enter your email address.." class="extend-input"&gt;
         &lt;input type="button" name="name" value="Subscribe"&gt;
         &lt;div class="social"&gt;
          &lt;div class="twitter-2"&gt;&lt;i class="icon-twitter"&gt;&lt;/i&gt;&lt;/div&gt;
           &lt;div class="facebook"&gt;&lt;i class="icon-facebook"&gt;&lt;/i&gt;&lt;/div&gt;
           &lt;div class="linkedin"&gt;&lt;i class="icon-linkedin"&gt;&lt;/i&gt;&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="second"&gt;
       &lt;form action=""&gt;
        &lt;h3&gt;Contact form&lt;/h3&gt;
        &lt;textarea name="name" rows="8" cols="45"&gt;&lt;/textarea&gt;
        &lt;input type="text" placeholder="Введите имя..."&gt;
        &lt;input type="text" placeholder="Введите email..."&gt;
        &lt;input type="text" placeholder="Тема письма..."&gt;
        &lt;input type="submit" name="name" value="Submit"&gt;
       &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
   &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>OR <a href="http://jsfiddle.net/h62xp0ge/" rel="nofollow noreferrer">http://jsfiddle.net/h62xp0ge/</a> </p>