개발자 도구의 width와 getBoundingClientRect().width의 길이가 다른 이유...

안녕하세요 개인적으로 만들고 있는 프로젝트에서 getBoundingClient().width의 값과 개발자 도구 상의 width 값이 다른 문제가 나와서 원인을 찾고 있습니다. div의 css는 box-sizing:border-box; padding:5px 10px; border:2px solid white; display:inline-block 입니다. 부모 div는 width 값을 정해주지 않아서 useEffect 안에서 부모 div의 children을 순회하며 자식 노드의 width를 누적해서 width값을 구하려고 하는데 첨부한 사진처럼 js로 구한 width가 개발자도구와 맞지 않는 문제가 발생하고 있습니다. 일단은 임의로 보정값을 넣어서 원하는 결과물은 나왔지만 찝찝한 마음이 들어서요 이 문제의 원인을 찾고 싶습니다. 감사합니다!