CSS element with position: fixed and width:100% is larger than its parent

sorry for my poorly worded previous question.

I have an element that has position:fixed and width:100%. The problem is that none of the parent elements have a fixed width. So my element is actually larger than any of its parent elements.

The implementation of my code is quite complex but I think I was able to simplify things. In the code below you will notice that the green box is larger than its parent elements.

export default function App() {
  return (
    <div
      style={{
        width: "100%",
        padding: "0px 15px",
        boxSizing: "border-box",
        height: "80px",
      }}
    >
      <div
        style={{
          width: "100%",
          border: "1px solid blue",
          height: "80px",
        }}
      >
        <div
          style={{
            width: "100%",
            border: "1px solid transparent",
            height: "80px",
          }}
        >
          <div style={{ width: "inherit", height: "25px" }}>
            <div style={{ width: "inherit", height: "25px" }}>
              <div
                style={{
                  width: "inherit",
                  position: "fixed",
                  height: "25px",
                  border: "1px solid green",
                }}
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}