Width and padding

Question

I am making a calculator, and when I was working in my offline HTML editor, I had the width set to 85% to make up for the 5% padding I added. Here in the SoloLearn editor its as if the padding doesn't affect the width, and I have to set it to 90% for it to show up correctly. Athough, when I look at my code inside of the mobile app, it shows up exactly as it should.

Can anyone explain why this is?

Thank you!

P.S. I am new to all of this.

#screen{
position: relative;
-> width: 90%;
height: 35px;
margin: 5%;
border-radius: 10px;
border: none;
box-shadow: inset 0px 3px #818181;
background-color: #6F9CA2;
text-align: right;
font-weight: 600;
font-size: 18px;
color: white;
letter-spacing: 3px;
-> padding-right: 5%;
}

Screenshots:
Mobile brower: https://goo.gl/photos/TKBC1pBnk3Td7FGB8
SoloLearn app: https://goo.gl/photos/jJsn5YgXHJAZESA7A

Answer 1

Hard to tell: we don't know context: target of your css rule is an id, so what type of element? in what container/layout type and style?...
In example, the 'position:relative' may require a context with 'position:absolute', and/or your layout is with <table> structure, so maybe a 'table-layout:fixed' can help, if it isn't a 'box-sizing:border-box' applyed on the <input> element...

In fact, debugging html/css is often a test/try sequence to find the trick, so access to the complete code is better to help ^^

Answer 2

Well, to fix it, add just this line at yours '#result' css rules:

box-sizing: border-box;

The reason is that the default value for this property of <input> elements isn't always the same between each browsers ^^
( look at project like reset.css and/or normalizer.css to more complete informations about inconsistencies between browsers... )

Answer 3

Here it is: https://code.sololearn.com/WLxopC7Ao8Bh/?ref=app

Answer 4

Ah!!!

Thank you so much! I appreciate the help!