diff --git a/populateGraphics.js b/populateGraphics.js
index cd794fd..4aa8685 100644
--- a/populateGraphics.js
+++ b/populateGraphics.js
@@ -414,10 +414,10 @@ function getSurveyData(){
 
     //Clear up the pyramids by resetting the html
     document.getElementById("pyramids").innerHTML = `
-        <svg class="pyramid" style="display: block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid" width="1000" height="1000"></svg>
-        <svg class="pyramid" style="display: block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG" width="1000" height="1000"></svg>
-        <svg class="pyramid no-axis no-text big-number" style="display: block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG_test" width="1000" height="1000"></svg>
-        <svg class="pyramid no-axis big-number" style="display: block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG_test2" width="1000" height="1000"></svg>
+        <svg class="pyramid" style="display: inline-block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid" width="1000" height="1000"></svg>
+        <svg class="pyramid" style="display: inline-block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG" width="1000" height="1000"></svg>
+        <svg class="pyramid no-axis no-text big-number" style="display: inline-block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG_test" width="1000" height="1000"></svg>
+        <svg class="pyramid no-axis big-number" style="display: inline-block" xmlns="http://www.w3.org/2000/svg" id="svg_pyramid_RAG_test2" width="1000" height="1000"></svg>
    `;
   
 
diff --git a/reportTemplate.html b/reportTemplate.html
index 7299372..b3fead9 100644
--- a/reportTemplate.html
+++ b/reportTemplate.html
@@ -40,7 +40,7 @@
 }
 
     .pyramid {
-      width: 100%;
+      width: auto;
       height: auto;
     }