body {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 16px;
box-sizing: border-box !important;
}
a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
a:hover,
a:link,
a:active {
text-decoration: none;
}
/* Rest of the CSS code omitted for brevity */
@media screen and (max-width: 600px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 1024px) {
}
As a frontend beginner, I have encountered issues with scaling elements properly in different browser sizes. Despite using media queries to adjust the layout, certain elements like iframes and menu bars tend to shift incorrectly. How can I ensure that when the browser window is resized, all elements stay in the correct position? The Home, About, and Instructions sections should start above the iframe, aligned slightly past its top left corner.