#header{ background-color:#252323; margin: 0 auto 0; max-width: 1366px; height: 60px; } #header:before{ display: inline-block; width: 100%; vertical-align: middle; content: ""; } #one{ width:40px; height: 20px; background-color: red; float:left; margin-left: 205px; vertical-align: middle; } #two{ width: 220px; height: 20px; float:right; background-color: green; margin-right: 195px; vertical-align: middle; } @media screen and (max-width: 480px){ #one{ margin-left: 1px; } #two{ width: 10px; margin-right: 1px; } } 
 <body> <div id="header"> <div id="one"></div> <div id="two"></div> </div> </body>

Tell me please. Why the block one, when reducing the screen clearly recorded 2 positions. And block two with a decrease in the screen goes as he pleases. It turns out Left is more important than right?

    1 answer 1

    The block does not fit because of margin-right: 195px; if you delete, it will move as you intend and the block with float:left cannot be more to the right than the block with float:right