Растянуть горизонтальный скролл?

Question

[kshkld7ck]

Доброго дня. Есть блок с горизонтальным скроллом, нужно сделать, чтобы блок был на 100% от экрана, а скролл в центре на 60%

<div class="parent container-fluid">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>

</div>

.parent {
    width: 100%;
   
margin:0 auto;
    overflow: hidden;
    overflow-x: initial;
    background: #fefefe;
    white-space:nowrap;
    padding-bottom:50px;
}

.child {
    display: inline-block;
    vertical-align: top;
    width: 500px;
    height:500px;
    background: #ce253d;
}/* width */
.parent::-webkit-scrollbar {
  
    height:20px;
 
}

/* Track */
.parent::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 20px;

}
 
/* Handle */
.parent::-webkit-scrollbar-thumb {
    background: #A4a4a4; 
    border-radius: 10px;
}

/* Handle on hover */
.parent::-webkit-scrollbar-thumb:hover {
    background: #e5e5e5; 
}

Answer 1

[Кирилл]

.parent {
width: 100vw;
}
.child {
width: 60vw;
margin: 0 auto;
}

Comments

[kshkld7ck]

Я скорее всего некорректно описал суть проблемы, прошу прощения.
должно быть примерно вот так

[Кирилл]

kshkld7ck, Если я правильно понял вопрос, задайте 100vw блоку и 60vw скролу, в чём тут проблема?

[kshkld7ck]

Кирилл, к сожалению ничего не меняется, в том то и проблема))

[Кирилл]

kshkld7ck, дайте код в песочнице того что у вас получилось

[kshkld7ck]

Кирилл, https://codepen.io/kshkld7ck/pen/VXdZXp