Why does css position:fixed use padding to lean to the right as a whole?

  <div class="footer">
  
    <div class="button"> </div>
    <div class="text">20.00</div>
  
  </div>
.footer{
    width:100%;
    position:fixed;
    height:200px;
    background-color:red;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding:0 10px; //padding
    }

.button{
    border:1px solid blue;
    text-align:center;
    line-height:40px;
    width:80px;
    height:40px;
    }

when padding:0 10px; Why does the right 20.00 exceed browser editing on the right?

Css
Nov.21,2021

box-sizing:border-box;

setting box-sizing:border-box can solve the problem.
has nothing to do with position:fixed; . The main reason is that display: flex; will turn the current dom box model into a standard model, and the calculation width will not take padding

.
/*  */
box-sizing:content-box;
 /*IE*/
box-sizing:border-box;

you need to know the CSS box model first, and then come back to look at this problem and you will understand

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3bd35-2bb19.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3bd35-2bb19.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?