diff --git a/tests/pages/bullet-charts.html b/tests/pages/bullet-charts.html
index ceeab74d19..fda1e578f2 100644
--- a/tests/pages/bullet-charts.html
+++ b/tests/pages/bullet-charts.html
@@ -10,24 +10,21 @@ <h2>Bullet Chart</h2>
   <div class="col-lg-4 col-sm-6 col-xs-12">
     <div class="bullet-chart-pf">
       <div class="bullet-chart-pf-chart">
-        <span class="bullet-chart-pf-title-container">
+        <div class="bullet-chart-pf-title-container">
           <div class="bullet-chart-pf-title-spacer"></div>
           <div class="bullet-chart-pf-title-labels-container">
-            <div class="bullet-chart-pf-title">
-              Text Label</div>
-            <div class="bullet-chart-pf-details">
-              Measure Details
-            </div>
+            <div class="bullet-chart-pf-title">Text Label</div>
+            <div class="bullet-chart-pf-details">Measure Details</div>
           </div>
           <!-- add this div to vertically center the titles -->
           <div class="bullet-chart-pf-axis"></div>
           <div class="bullet-chart-pf-title-spacer"></div>
-        </span>
-        <span class="bullet-chart-pf-container">
+        </div>
+        <div class="bullet-chart-pf-container">
           <div class="bullet-chart-pf-data-container">
             <div class="bullet-chart-pf-values-container">
-              <div class="bullet-chart-pf-value-bar" style="left: 0%; width: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
-              <div class="bullet-chart-pf-value-bar" style="left: 0%; width: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
+              <div class="bullet-chart-pf-value-bar" style="left: 0; width: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
+              <div class="bullet-chart-pf-value-bar" style="left: 0; width: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
             </div>
             <div class="bullet-chart-pf-threshold-indicator warning" style="left: 70%;"></div>
             <div class="bullet-chart-pf-threshold-indicator error" style="left: 90%;"></div>
@@ -42,7 +39,7 @@ <h2>Bullet Chart</h2>
             <span class="bullet-chart-pf-axis-tic" style="left: calc(75% - 15px);">75</span>
             <span class="bullet-chart-pf-axis-tic" style="left: calc(100% - 15px);">100</span>
           </div>
-        </span>
+        </div>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
@@ -77,20 +74,16 @@ <h2>Bullet Chart - Vertical</h2>
     <div class="bullet-chart-pf bullet-chart-pf-vertical">
       <div class="bullet-chart-pf-chart">
         <div class="bullet-chart-pf-title-labels-container">
-          <div class="bullet-chart-pf-title">
-            Text Label
-          </div>
-          <div class="bullet-chart-pf-details">
-            Measure Details
-          </div>
+          <div class="bullet-chart-pf-title">Text Label</div>
+          <div class="bullet-chart-pf-details">Measure Details</div>
         </div>
         <div class="bullet-chart-pf-vertical-data-container">
           <div class="bullet-chart-pf-vertical-data-spacer"></div>
-          <span class="bullet-chart-pf-container show-axis">
+          <div class="bullet-chart-pf-container show-axis">
             <div class="bullet-chart-pf-data-container">
               <div class="bullet-chart-pf-values-container">
-                <div class="bullet-chart-pf-value-bar" style="bottom: 0%; height: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
-                <div class="bullet-chart-pf-value-bar" style="bottom: 0%; height: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
+                <div class="bullet-chart-pf-value-bar" style="bottom: 0; height: 25%; background-color: rgb(0, 136, 206); z-index: 375;"></div>
+                <div class="bullet-chart-pf-value-bar" style="bottom: 0; height: 120%; background-color: rgb(57, 165, 220); z-index: 350;"></div>
               </div>
               <div class="bullet-chart-pf-threshold-indicator warning" style="bottom: 70%;"></div>
               <div class="bullet-chart-pf-threshold-indicator error" style="bottom: 90%;"></div>
@@ -105,7 +98,7 @@ <h2>Bullet Chart - Vertical</h2>
               <span class="bullet-chart-pf-axis-tic" style="bottom: calc(75% - 10px);">75</span>
               <span class="bullet-chart-pf-axis-tic" style="bottom: calc(100% - 10px);">100</span>
             </div>
-          </span>
+          </div>
           <div class="bullet-chart-pf-vertical-data-spacer"></div>
         </div>
         <span class="bullet-chart-pf-overflow"></span>
@@ -141,7 +134,7 @@ <h2>Bullet Chart - Dots</h2>
   <div class="col-lg-4 col-sm-6 col-xs-12">
     <div class="bullet-chart-pf">
       <div class="bullet-chart-pf-chart">
-        <span class="bullet-chart-pf-title-container">
+        <div class="bullet-chart-pf-title-container">
           <div class="bullet-chart-pf-title-spacer"></div>
           <div class="bullet-chart-pf-title-labels-container">
             <div class="bullet-chart-pf-title">Text Label</div>
@@ -150,8 +143,8 @@ <h2>Bullet Chart - Dots</h2>
           <!-- add this div to vertically center the titles -->
           <div class="bullet-chart-pf-axis"></div>
           <div class="bullet-chart-pf-title-spacer"></div>
-        </span>
-        <span class="bullet-chart-pf-container">
+        </div>
+        <div class="bullet-chart-pf-container">
           <div class="bullet-chart-pf-data-container">
             <div class="bullet-chart-pf-values-container">
               <div class="bullet-chart-pf-value-dot" style="left: 25%; z-index: 125; border-color: rgb(0, 136, 206);"></div>
@@ -170,7 +163,7 @@ <h2>Bullet Chart - Dots</h2>
             <span class="bullet-chart-pf-axis-tic" style="left: calc(75% - 15px);">75</span>
             <span class="bullet-chart-pf-axis-tic" style="left: calc(100% - 15px);">100</span>
           </div>
-        </span>
+        </div>
         <span class="bullet-chart-pf-overflow"></span>
       </div>
       <div class="bullet-chart-pf-legend">
@@ -210,7 +203,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
         </div>
         <div class="bullet-chart-pf-vertical-data-container">
           <div class="bullet-chart-pf-vertical-data-spacer"></div>
-          <span class="bullet-chart-pf-container show-axis">
+          <div class="bullet-chart-pf-container show-axis">
             <div class="bullet-chart-pf-data-container">
               <div class="bullet-chart-pf-values-container">
                 <div class="bullet-chart-pf-value-dot" style="bottom: calc(25% - 10px); border-color: rgb(0, 136, 206); z-index: 125;"></div>
@@ -229,7 +222,7 @@ <h2>Bullet Chart - Vertical - Dots</h2>
               <span class="bullet-chart-pf-axis-tic" style="bottom: calc(75% - 10px);">75</span>
               <span class="bullet-chart-pf-axis-tic" style="bottom: calc(100% - 10px);">100</span>
             </div>
-          </span>
+          </div>
           <div class="bullet-chart-pf-vertical-data-spacer"></div>
         </div>
         <span class="bullet-chart-pf-overflow"></span>