Search code examples
htmlzooming

Footer div moves when zooming out

My footer div element moves to the right when zooming out. It is supposed to be like in the picture, the one with the blue letters.I need this to work for a larger screensthe problem ` 

        <div>
        <p class="">&copy; 2020 Pizza. All Rights Reserved</p>
        </div>`

And here is the css

footer div {
color: #0c648f;
font-size: 14px;
background-color: #f2f4f5;
padding: 1px 0;
margin-top: 10px;

}

footer p {
text-align: right;

}

Solution

  • Is the idea that it should be right-aligned to the page content? If so, you need a max-width on the footer p styles, so that the content will align to the right of that space rather than the right of the full page. You will need to center that element as well (using margin: auto).