The width of div is set to 100%. Why doesn't it reflect

the code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    -sharpfather {
      width: 400px;
      height: 200px;
      border: 1px solid -sharp000;
    }
    -sharpson {
      width: 100%;
      height: 100%;
      background: pink;
      margin: 0 100px;
    }
  </style>
</head>
<body>
  <div id="father">
    <div id="son"></div>
  </div>
</body>
</html>

the effect is as follows:

clipboard.png

The margin-right with

set div is not reflected. What is the reason?

Sep.27,2021

= Update
the following figure is excerpted from p171, the third edition of the css authoritative Guide. According to this rule, the margin-right here will be -200px . As for the browser debug bar showing 100px , I really don't understand, but the rendering is consistent.

====
:

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-1b38089-2c0ea.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-1b38089-2c0ea.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?