DetailsList: Move background from .cell to .root in DetailsHeader (#2548)

* Move background property from .cell to .root to fix background not expanding whole width of detailslist

* Add change file

* Remove duplicate property

Author: leddie24

common/changes/office-ui-fabric-react/v-edwliu-detailsheader-background-fix_2017-08-18-20-44.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "DetailsList: Move background color from .cell to .root for DetailsHeader",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss

@@ -11,6 +11,7 @@ $isPaddedMargin: 24px;
 
 .root {
   display: inline-block;
+  background: $headerBackgroundColor;
   position: relative;
   min-width: 100%;
   vertical-align: top;
@@ -35,7 +36,6 @@ $isPaddedMargin: 24px;
 
 .cell {
   @include ms-font-s;
-  background: $headerBackgroundColor;
   color: $headerForegroundColor;
   @include focus-border();
   position: relative;
@@ -45,7 +45,6 @@ $isPaddedMargin: 24px;
   border: none;
   line-height: inherit;
   margin: 0;
-  @include ms-text-align(left);
   height: $rowHeight;
   vertical-align: top;
   white-space: nowrap;