diff --git a/css/style.css b/css/style.css
index 85f804d..703f4ef 100644
--- a/css/style.css
+++ b/css/style.css
@@ -12,7 +12,7 @@ body, #content {
 
 .flexcolumn,
 .leaflet-sidebar-pane.active,
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody {
     display: -webkit-box;
@@ -43,10 +43,10 @@ body, #content {
 }
 
 /* 'auto' (1 1 auto) instead of '1' (1 1 0) needed for DataTables tab in Firefox */
-#datatable_wrapper,
+.dataTables_wrapper,
 .dataTables_scroll,
 .dataTables_scrollBody,
-#datatable {
+table.dataTable {
     -webkit-box-flex: auto;
     -moz-box-flex: auto;
     -webkit-flex: auto;
@@ -225,6 +225,11 @@ https://css-tricks.com/svg-line-animation-works/
 * DataTables
 */
 
+table.dataTable {
+    /* avoid getting centered and header misaligned with flex row (sidebar) */
+    margin: 0;
+}
+
 table.dataTable.mini thead th,
 table.dataTable.mini thead td {
     padding: 3px 13px 3px 2px;
diff --git a/index.html b/index.html
index 25dc7dc..023205e 100644
--- a/index.html
+++ b/index.html
@@ -206,7 +206,7 @@
 
                     <div class="leaflet-sidebar-pane" id="tab_data">
                         <h1 class="leaflet-sidebar-header">Data<span class="leaflet-sidebar-close"><i class="fa fa-caret-right"></i></span></h1>
-                        <table id="datatable" class="table mini cell-border hover stripe"></table>
+                        <table id="datatable" class="mini cell-border hover stripe"></table>
                     </div>
 
                     <div class="leaflet-sidebar-pane" id="tab_itinerary">