It's important to remember that block level elements, like the div in your case, always stretch from one side of the page to the other. When you set a width, you're actually controlling the width of the content inside the block, not the block itself as a whole. To achieve your desired layout, you may need to float or reposition the first div so it doesn't take up the full width.
Additionally, keep in mind that borders are outside the content width and padding and margin also affect the overall size. By setting a width of 80% and 20% for your div elements, you must consider how this interacts with the parent element (in this case, the body) and any border thickness which adds extra pixels to the total width.
If you want to maintain the borders, you could adjust the widths of the div elements to accommodate them or alternatively remove the borders and float the first div instead to achieve your desired layout.
In response to a question in the comments, you can use the CSS calc() function to calculate the width by subtracting the necessary pixels corresponding to the border width. Remember to account for any additional space taken up by the border when using this method.
UPDATE: It's worth noting that the width of certain border styles, such as "dotted", may exceed 1px. Adjust your calculations accordingly to accommodate the specific border style being used.