CSS - problem with positioning items on horizontal scroll - html

Question

I have a problem with position when I scroll one row to the right. Code: https://codepen.io/olastanislawska/pen/GRqooyG (mobile view). Scroll first row to the right and highlight movies class in the first row, then the second row. In the first something is missing, I dont know how to fix that.
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: #rich_clark
*/
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none;
}
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title],
dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0;
}
input,
select {
vertical-align: middle;
}
#app {
height: 100%;
position: relative;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
}
#app::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
z-index: -1000;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: fixed;
-webkit-filter: blur(10px);
filter: blur(10px);
}
#movies .categories {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 15;
}
#movies .categories .category {
position: relative;
margin: 15px;
}
#movies .categories .category .movies {
overflow-x: auto;
white-space: nowrap;
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
#movies .categories .category .movies .movie {
min-width: 90%;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: 5%;
position: relative;
text-align: center;
overflow-y: hidden;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
#media (min-width: 350px) {
#movies .categories .category .movies .movie {
min-width: calc(50%);
}
}
#movies .categories .category .movies .movie.active {
color: #fff;
}
#movies .categories .category .movies .movie.active .image::after {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
background-color: rgba(54, 54, 54, 0.75);
position: absolute;
border: 2px solid deeppink;
}
#movies .categories .category .movies .movie.active .title {
position: absolute;
top: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content {
position: absolute;
bottom: 5%;
width: 100%;
}
#movies .categories .category .movies .movie.active .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
cursor: pointer;
}
#movies .categories .category .movies .movie .image {
width: 100%;
height: 200px;
background: red;
}
#movies .categories .category .movies .movie .title {
position: absolute;
top: -100%;
width: 100%;
}
#movies .categories .category .movies .movie .content {
position: absolute;
bottom: -100%;
width: 100%;
}
.slider-btns {
position: absolute;
right: 15px;
}
.slider-btns i {
font-size: 22px;
cursor: pointer;
}
#navigation {
padding: 15px 0;
margin: 0 10px;
overflow-x: scroll;
}
#navigation ul.nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-size: 16px;
}
#navigation ul.nav li {
padding: 5px 15px;
}
#navigation ul.nav li.active {
background-color: deeppink;
border-radius: 25px;
font-weight: bold;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
margin-left: 5px;
}
#slider {
width: 100vw;
height: 75vh;
margin: 0 auto;
position: relative;
z-index: 1000;
}
#slider::before {
content: '';
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
position: absolute;
background: black;
background: -webkit-gradient(linear, left bottom, left top, from(black), color-stop(25%, rgba(0, 0, 0, 0.8)), to(rgba(0, 0, 0, 0)));
background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%);
}
#slider .logo {
padding: 15px;
position: absolute;
font-family: 'Dancing Script', cursive;
font-size: 30px;
color: #fff;
text-shadow: 0 0 10px deeppink;
}
#slider .image {
height: 100%;
background-image: url(../../markus-spiske-QmEF-d1HQVI-unsplash.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#slider .content {
position: absolute;
bottom: 10%;
right: 5%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#slider .content .title {
width: 100%;
}
#slider .content .title h3 {
text-align: center;
color: deeppink;
min-width: 100px;
padding: 5px;
border-radius: 10px;
font-size: 18px;
margin: 10px 0;
}
#slider .content .description {
max-width: 100%;
position: relative;
overflow-wrap: break-word;
}
#slider .content .description p {
text-align: center;
color: #fff;
font-size: 14px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#slider .content button {
background-color: deeppink;
border: none;
border-radius: 4px;
margin: 10px 0;
padding: 5px 10px;
text-transform: uppercase;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
cursor: pointer;
-webkit-box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.25);
}
/*# sourceMappingURL=main.css.map */
<body>
<div id="app">
<div id="slider">
<div class="logo">MovieApp</div>
<div class="image"></div>
<div class="content">
<div class="title"><h3>- Title -</h3></div>
<div class="description">
<p>
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description description description
description description description
</p>
</div>
<button>More</button>
</div>
</div>
<div id="navigation">
<ul class="nav">
<li data-category="top" class="nav-item active">Top</li>
<li data-category="comedy" class="nav-item">Comedy</li>
<li data-category="horror" class="nav-item">Horror</li>
<li data-category="documentary" class="nav-item">Documentary</li>
<li data-category="thriller" class="nav-item">Thriller</li>
<li data-category="musical" class="nav-item">Musical</li>
</ul>
<div class="search"></div>
</div>
<div id="movies">
<div class="slider-btns">
<i class="fa fa-angle-left"></i>
<i class="fa fa-angle-right"></i>
</div>
<div class="categories">
<div data-category="comedy" class="category">
<div class="movies">
<div data-item="1" class="movie active">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="horror" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="documentary" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="thriller" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
<div data-category="musical" class="category">
<div class="movies">
<div data-item="1" class="movie">
<div class="image"></div>
<div class="title">Title 1</div>
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
<div data-item="2" class="movie">
<div class="image"></div>
<div class="title">Title 2</div>
<div class="content">Content</div>
</div>
<div data-item="3" class="movie">
<div class="image"></div>
<div class="title">Title 3</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="4" class="movie">
<div class="image"></div>
<div class="title">Title 4</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
<div data-item="5" class="movie">
<div class="image"></div>
<div class="title">Title 5</div>
<div class="content">
<div class="content">
<p>Content</p>
<button>More</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>