d3 fitSize doesn't fit the extent as expected using a geojson polygon

I'm using D3 to draw geo data on top of a static map.

Before drawing the data, I'm using d3's fitSize method to set the projection so that the bounds of the map (as spherical lat lng pairs) fit the full extent of the canvas.

const size = {
  width: 1048,
  height: 447
};

const bounds = [
  -13.098400070906848,
  51.44391918744,
  17.18913007090731,
  42.66553377959798
];

const geojson = turf.bboxPolygon([bounds[0], bounds[1], bounds[2], bounds[3]])

const projection = d3.geoMercator().fitSize([size.width, size.height], geojson);

d3.geoPath().projection(projection);

In this example, the projection doesn't fit the extent, the scale is off by a large margin.

I should note that I get the bounds from the map beforehand so the issue shouldn't be due to a proportions difference between the canvas size and the bounds.

I've put together an example here where the projection doesn't fit. It shows where the projection draws the bounds compared to the extent.

As you can see in the logs, the ratios of the bounds dimensions and the canvas dimensions are almost identical, meaning that we should be able to scale the bounds to the full extent of the canvas.

I'm confused as to why that is and how to fix it.

Any help would be greatly appreciated! Thanks!