How do i fix my navbar that won't go responsive properly
when i was trying to make a responsive navbar i ran into this width problem
so here’s the HTML code
body{ margin: 0; } .nav{ background-color: lightgreen; height: 40px; width: 100%; } .footer{ background-color: #333; font-size: 18px; padding: 20px; width: 100%; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="nav"></div> <div class="footer"> <h1>test</h1> <h1>test</h1> <h1>test</h1> <h1>test</h1> <h1>test</h1> </div> </body> </html>i it all worked fine until i go to the "developer tools" and viewed it on android, even though i make width 100% it still didn’t reach the other end when i make it smaller 
The problem that you are having is the footer. By default padding is added to the element’s overall width and height. So when you give footer a width of 100% with 20px padding the width actually becomes 100%+20px+20px.
This can be easily overcome by adding box-sizing:border-box to your footer class. Or many people just set it to every element like *{box-sizing:border-box} so you won’t have that problem again.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
body{ margin: 0; } .nav{ background-color: lightgreen; height: 40px; width: 100%; } .footer{ background-color: #333; font-size: 18px; padding: 20px; width: 100%; box-sizing:border-box }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="nav"></div> <div class="footer"> <h1>test</h1> <h1>test</h1> <h1>test</h1> <h1>test</h1> <h1>test</h1> </div> </body> </html>
