Positioning an item in layout

Media queries in media.css change the margin-left for the logo and padding-left for the background of the entire header. Moreover, the lower and upper conditions in these media queries are messy:

 @media (max-width: 1600px){ .header-bg2 img{ margin-left: 122px; } } @media (max-width: 1280px){ .header-bg2 img{ margin-left: 0; } .header-bg2 { padding-left: 0px; } .header-bg { padding-left: 0px; } } @media (max-width: 1440px){ .header-bg2 img{ margin-left: 50px; } } @media (max-width: 768px){ .header-bg2 img{ margin-left: 0px; } } @media (min-width: 1900px){ .header-bg2 img{ margin-left: 282px; } } @media only screen and (min-width: 992px) and (max-width: 1024px) { .header-bg2 img{ margin-left: 0px; width: 80%; } } 

As a result, with a screen width of 1057 pixels, the logo falls under the title of the site, and how to fix it is not clear.

Since the page uses Bootstrap, and Boostrap has switched to Mobile first , I recommend their own structure of media queries as a sample:

• or media queries use min-width and are arranged in ascending order of lower bound
• or use min-width and max-width simultaneously (except for media queries for the narrowest and widest screens)
• max-width suitable for a media query for the narrowest screen.

For example:

 @media (max-width: 1280px){ .header-bg { padding-left: 0px; } .header-bg2 { padding-left: 0px; } .header-bg2 img{ margin-left: 0; } } @media (min-width: 1281px){ .header-bg2 img{ margin-left: 50px; } } @media (min-width: 1441px){ .header-bg2 img{ margin-left: 122px; } } @media (min-width: 1601px){ .header-bg2 img{ margin-left: 282px; } } 

It floats because it is driven by a Bootstrap grid. When you change the scale, the grid is rebuilt and the block "floats".