diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index 31ad4e8050..069a40c154 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -809,10 +809,6 @@ export class HorizontalCategoricalColorLegend extends HorizontalColorLegend {
         return max(this.marks.map((mark) => mark.y + mark.rectSize)) ?? 0
     }
 
-    @computed get numLines(): number {
-        return this.markLines.length
-    }
-
     renderLabels(): React.ReactElement {
         const { manager, marks } = this
         const { focusColors, hoverColors = [] } = manager
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
index 6a3c29eb8c..a07da5438f 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -514,11 +514,13 @@ export class MapChart
     }
 
     @computed get legendMaxWidth(): number {
-        return this.bounds.width
+        // it seems nice to have just a little bit of
+        // extra padding left and right
+        return this.bounds.width * 0.95
     }
 
     @computed get legendX(): number {
-        return this.bounds.x
+        return this.bounds.x + (this.bounds.width - this.legendMaxWidth) / 2
     }
 
     @computed get legendHeight(): number {
@@ -555,9 +557,7 @@ export class MapChart
     }
 
     @computed get legendAlign(): HorizontalAlign {
-        if (this.numericLegend) return HorizontalAlign.center
-        const { numLines = 0 } = this.categoryLegend ?? {}
-        return numLines > 1 ? HorizontalAlign.left : HorizontalAlign.center
+        return HorizontalAlign.center
     }
 
     @computed get numericLegendY(): number {