List: Center list in middle of screen with max width (#36)

www/pages/list.html

@@ -47,16 +47,19 @@
 
     <div class="page-content">
 
-        <div id="no-packages-display" class="block display-none text-align-center">
-            <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
-            <div class="margin-top"><a href="/add" class="button button-round button-fill margin-horizontal">Add a Package</a></div>
-        </div>
-        <div class="list no-hairlines tablet-inset no-margin-top accordion-list" id="addresslist">
-            <ul>
-                <!-- Packages go here -->
-            </ul>
+        <div class="row justify-content-center">
+            <div class="col-100 small-80 medium-60 large-50 xlarge-40">
+            <div id="no-packages-display" class="block display-none text-align-center">
+                <img style="width: 60%; max-width: 300px; max-height: 40vh;" src="assets/images/box-open-dashed.svg" class="margin-vertical" />
+                <div class="margin-top"><a href="/add" class="button button-round button-fill margin-horizontal">Add a Package</a></div>
+            </div>
+            <div class="list no-hairlines tablet-inset no-margin-top accordion-list" id="addresslist">
+                <ul>
+                    <!-- Packages go here -->
+                </ul>
+            </div>
+            </div>
         </div>
-
     </div>
 
     <div class="popover" id="popover-sort-list">