CSS padding-right disappear when position fixed width 100%

Posted on | Edited on |

When creating fixed navigation bar with padding, we got :

1
2
3
position: fixed;
width: 100%;
padding: 15px;

However you will find padding-right disappear, the reason is the width is window width + padding-left + padding-right. It is exceed the window, to fix it just use width: calc(100% - 30px) to reduce the width

1
2
3
position: fixed;
width: calc(100% - 30px);
padding: 15px;

See the Pen Fixed nav with correct padding by AsinChen (@Asing1001) on CodePen.