* { box-sizing: border-box; margin: 0; padding: 0; } html, body { font-size: 0; height: 100%; } body { background: #ccc; } .frame { padding: 0 15%; } .sec_1 { background: #ffe; } .sec_2 { background: #ffc; } .sec_1 .fix { top: 20px; background: #Fec; } .sec_2 .fix { background: #Fcc; } section { font-size: 12px; display: inline-block; position: relative; width: 50%; height: 1000px; } .fix { width: 100%; position: fixed; left: 0; top: 0; height: 20px; } <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class='frame'> <main class='main'> <section class='sec_1'> <div class='fix'>1 fix</div> 1 sec </section> <section class='sec_2'> <div class='fix'>2 fix</div> 2 sec </section> </main> </div> </body> </html> How to make so that elements with position: fixed were on width of the parent. In this example, I could not achieve what I wanted. 
In my project, in some unknown way, fixed elements stuck to the left edge of the parent element (and no positioning was explicitly specified), and the right edge extends beyond the borders of the elements and goes beyond the screen boundary. I tried to recreate the structure and code in the example, but it failed. In this example, the fixed elements go beyond the boundaries of the parents. How to make fixed elements be the width of the parent. No ad width in absolute units.
