scroll add extra space in safari browser but looks ok in chrome on a Mac

Im not sure how to correct this. I am using a side scroll without a bar at the bottom. in dreamweaver it shows the same as chrome but in safari it adds extra space around it

The error seems to be within this part of the css code

.content {
/* These rules create an artificially confined space, so we get
a scrollbar that we can hide. They are not directly involved in
hiding the scrollbar. */

border: 1px dashed gray;
padding: .5em;

white-space: pre-wrap;
height: 5em;
overflow-x: scroll;
}

.content {
/* This is the magic bit for Firefox */
scrollbar-width: none;
}

.content::-webkit-scrollbar {
/* This is the magic bit for WebKit */
display: none;
}

Demo

https://codepen.io/tim-cross-the-encoder/pen/pooEQBg

Chrome

Safari brower

Hop you can help

Tim