html, body { font-family: Roboto; } a { color: #fd084a; text-decoration: none; } p { color: #fff; } .description { margin-top: 50px; } span.left-arrow, span.right-arrow { color: #fbfbfb; cursor: pointer; display: block; font-size: 1em; height: auto; padding: 1em; position: absolute; top: 80%; transition: all 0.3s ease; width: auto; z-index: 999; } span.left-arrow:hover, span.right-arrow:hover { background-color: #87CEEB; } .left-arrow { right: 60px; } .right-arrow { right: 0; } .slider { color: #fbfbfb; overflow: hidden; position: relative; } .slider .carousel { height: 200px; list-style: none; margin: 0; padding: 0; position: relative; } .slider .carousel .carousel-footer { color: #ffffff; bottom: -80px; position: relative; } .slider .carousel li { background-image: url(здесь ваш фон); display: block; float: left; height: 300px; margin: 0; padding: 70px 0; position: relative; text-align: center; } .slider .carousel li h3, .slider .carousel li a, .slider .carousel li p { color: #fbfbfb; } @media only screen and (min-width: 780px) { .slider .carousel li { width: 700px; } } @media only screen and (min-width: 680px) and (max-width: 779px) { .slider .carousel li { width: 600px; } } @media only screen and (min-width: 480px) and (max-width: 679px) { .slider .carousel li { width: 400px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .slider .carousel li { width: 300px; } } @media only screen and (max-width: 319px) { .slider .carousel li { width: 200px; } } .feed { background-color: #fbfbfb; margin: auto; } .feed ul { width: 100%; margin: 0; padding: 0; } .feed h3 { color: #424242; padding: 0 0.8em; } .feed li { align-items: center; display: flex; justify-content: flex-start; list-style: none; transition: background-color 0.3s ease; width: 100%; } .feed li a { color: #0000ff; margin: 0; padding: 1em; } .feed li:hover { background-color: #87CEEB; } @media only screen and (min-width: 780px) { .feed { width: 700px; } } @media only screen and (min-width: 680px) and (max-width: 779px) { .feed { width: 600px; } } @media only screen and (min-width: 480px) and (max-width: 679px) { .feed { width: 400px; } } @media only screen and (min-width: 320px) and (max-width: 479px) { .feed { width: 300px; } } @media only screen and (max-width: 319px) { .feed { width: 200px; } } .wrapper { align-items: center; display: flex; flex-direction: column; margin: auto; }