CSS Padding pushing right-aligned objects off the page-CodePudding

I am making a navbar for my website. I have a div in which I want to have the logo and, aligned to the far right, a download button. I am using the CSS property 'justify-content' and 'space-between' to align the button to the right. However, when I add padding to the left side of the div, the button is pushed off the page.

Here is my code:

  body, html {
            margin: 0;
            background-color: #000000;
        }
        #header {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 30px;
            position: fixed;
            background-color: rgb(10, 98, 160, .5);
            width: 100%;
            border-bottom: 1px solid #808080;
            display: flex;
            justify-content: space-between;
            padding-left: 20px;
        }

    <div id="header">
        <img src="titanium_tsp.png" height="100%">
        <button>Download</button>
    </div>

CodePudding user response：

You said that the header is 100% of the width, but with the default box-sizing of content-box, that means that content of the header is 100% of the width, which disregards the padding. Change the box-sizing to border-box so that padding is taken into consideration as well:

#header {
    box-sizing: border-box;
    . . .
}

CodePudding user response：

You can add a margin-right to your button to make sure you negate the padding.

body, html {
            margin: 0;
            background-color: #000000;
        }
        #header {
            padding-top: 10px;
            padding-bottom: 10px;
            height: 30px;
            position: fixed;
            background-color: rgb(10, 98, 160, .5);
            width: 100%;
            border-bottom: 1px solid #808080;
            display: flex;
            justify-content: space-between;
            padding-left: 20px;
        }
        
        #header button {
            margin-right: 20px;
        }

<div id="header">
        <img src="titanium_tsp.png" height="100%">
        <button>Download</button>
    </div>