diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
index 474062b..8d4ebd0 100644
--- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
+++ b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.css
@@ -1,4 +1,6 @@
 .ViewportOrientationMarkers {
+  --marker-width: 100px;
+  --scrollbar-width: 20px;
   pointer-events: none;
   font-size: 15px;
   color: #ccc;
@@ -15,13 +17,16 @@
   top: 47%;
   left: 5px;
 }
-
 .ViewportOrientationMarkers .right-mid {
   top: 47%;
-  left: 97%;
+  left: calc(100% - var(--marker-width) - var(--scrollbar-width));
 }
-
 .ViewportOrientationMarkers .bottom-mid {
   top: 97%;
   left: 47%;
 }
+.ViewportOrientationMarkers .right-mid .orientation-marker-value {
+  display: flex;
+  justify-content: flex-end;
+  min-width: var(--marker-width);
+}
diff --git a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js
index d45adc9..8fdf349 100644
--- a/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js
+++ b/src/ViewportOrientationMarkers/ViewportOrientationMarkers.js
@@ -121,7 +121,7 @@ class ViewportOrientationMarkers extends PureComponent {
           className={`${m}-mid orientation-marker`}
           key={`${m}-mid orientation-marker`}
         >
-          {markers[m]}
+          <div className="orientation-marker-value">{markers[m]}</div>
         </div>
       ));