diff --git a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
index c5ce14e262e..6595d83d192 100644
--- a/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
+++ b/packages/@ourworldindata/grapher/src/horizontalColorLegend/HorizontalColorLegends.tsx
@@ -808,6 +808,10 @@ 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 a07da5438fa..6a3c29eb8c7 100644
--- a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
+++ b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -514,13 +514,11 @@ export class MapChart
     }
 
     @computed get legendMaxWidth(): number {
-        // it seems nice to have just a little bit of
-        // extra padding left and right
-        return this.bounds.width * 0.95
+        return this.bounds.width
     }
 
     @computed get legendX(): number {
-        return this.bounds.x + (this.bounds.width - this.legendMaxWidth) / 2
+        return this.bounds.x
     }
 
     @computed get legendHeight(): number {
@@ -557,7 +555,9 @@ export class MapChart
     }
 
     @computed get legendAlign(): HorizontalAlign {
-        return HorizontalAlign.center
+        if (this.numericLegend) return HorizontalAlign.center
+        const { numLines = 0 } = this.categoryLegend ?? {}
+        return numLines > 1 ? HorizontalAlign.left : HorizontalAlign.center
     }
 
     @computed get numericLegendY(): number {