.slidng{ position: relative; } .value{ width: 750px; display: flex; align-items: center; justify-content: center; color: black; font-size: 50px; height: 50px; text-align: center; } .scroll{ width: 750px; height: 300px; background-color: pink; position: relative; } .scrollContent{ display: flex; flex-direction: row; } .scrollPadding{ width: 375px; height: 30px; background-color: white; flex-shrink: 0; } .content{ height: 30px; background-color: blue; flex-shrink: 0; display: flex; flex-direction: row; } .slidng_item{ display: flex; flex-shrink: 0; box-sizing: border-box; // width: 2px; height: 15px; background-color: white; // margin-right: 18px; } .slidng_item_big{ display: flex; flex-shrink: 0; box-sizing: border-box; // width: 2px; height: 30px; background-color: white; // margin-right: 18px; position: relative; } .slidng_item_middle{ display: flex; flex-shrink: 0; box-sizing: border-box; // width: 2px; height: 25px; background-color: white; // margin-right: 18px; position: relative; } .slidng_text{ position: absolute; left: -25px; width: 50px; // right: 30px; top: 30px; text-align: center; color: black; display: flex; align-items: center; justify-content: center; background-color: oldlace; font-size: 20px; } .center_line{ width: 2px; height: 50px; background-color: red; position: absolute; left: 374px; top: 50px; } .demo2{ width: 750px; height: 40px; background-color: pink; flex-shrink: 0; }