diff --git a/src/components/ToDo.vue b/src/components/ToDo.vue
index 6f4a962..9e99e59 100644
--- a/src/components/ToDo.vue
+++ b/src/components/ToDo.vue
@@ -29,6 +29,6 @@ export default {
 <template>
   <div class="component_container">
     <div ref="toolbar_container"></div>
-    <div ref="todo_container" style="height: calc(100% - 56px);"></div>
+    <div ref="todo_container" class="widget"></div>
   </div>
 </template>
diff --git a/src/style.css b/src/style.css
index c2d7738..f5576ef 100644
--- a/src/style.css
+++ b/src/style.css
@@ -7,6 +7,18 @@ body,
   background-color: #f7f7f7;
 }
 
+/* specify styles for To Do List and Toolbar container*/
+.component_container {
+  height: 100%; 
+  max-width: 800px; 
+  margin: 0 auto;
+}
+
+/* specify styles for To Do List container*/
+.widget {
+  height: calc(100% - 56px);
+}
+
 .component_container {
   height: 100%; 
   max-width: 800px;