I created a lightning data table with sorting, and it does  not seem to format, I am not able to use CSS to style any components as well.  The screen shot below is a screen shot of a test app I created in lightning.  What am I missing?

Lightning Component
<aura:component controller="ActivityFirmComponentControllerSCRewrite">

    <aura:attribute name="data" type="Object" access="GLOBAL" description="The page data"/>
    <aura:attribute name="columns" type="List" description="The data to be displayed in the grid."/>
    <aura:attribute name="parentId" type="String" description="The Firm Id to be passed to the query." />
    <aura:attribute name="urlEvent" type="String"  />
      <aura:attribute name="urlTask" type="String"  />
      <aura:attribute name="urlCall" type="String"  />
      <aura:attribute name="urlEdit" type="String"  />
    <aura:attribute name="sortedBy" type="String"/>
    <aura:attribute name="sortedDirection" type="String"/>
    <aura:attribute name="defaultSortDirection" type="String"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
     <div class="slds-text-align_right slds-m-bottom_x-small">
    <center>
      <lightning:buttonGroup>
          <lightning:button variant="brand" label="New Event" onclick="{!c.goToUrl}"></lightning:button>
          <lightning:button variant="brand" label="New Task" onclick="{!c.goToUrl}"></lightning:button>
          <lightning:button  variant="brand" label="Log a Call" onclick="{!c.goToUrl}"></lightning:button>
      </lightning:buttonGroup>
    </center>
    </div>
    <br/>
   <!--Component Start-->
    <div class="slds-m-around_xx-large" style="height: 300px">
        <lightning:datatable columns="{!v.columns}"
                             data="{!v.data}"
                             keyField="Id"                          
                             hideCheckboxColumn="true"
                             sortedBy="{!v.sortedBy}"
                             sortedDirection="{!v.sortedDirection}"
                             defaultSortDirection="{!v.defaultSortDirection }"
                             onsort="{!c.handleColumnSorting}"/>
        <br/>
     
    </div>
    
</aura:component>
Lightning Controller
({
    init: function(component, event, helper) {
        var parentId = component.get("v.modalData.parentId");
        component.set("v.parentId", parentId);
          component.set('v.columns', [
        {label: 'DUE DATE',fieldName: 'actDueDate',type: 'dateTime', sortable:'true'},
        {label: 'PRIMARY CONTACT',fieldName: 'actPrimaryContact',type: 'text', sortable:'true'},
        {label: 'ACTIVITY TYPE',fieldName: 'actType',type: 'text', sortable:'true'},
        {label: 'SUBTYPE',fieldName: 'actSubType',type: 'text', sortable:'true'},
        {label: 'DESCRIPTION',fieldName: 'actFullDesc',type: 'text', sortable:'true'},
        {label: 'SUBJECT',fieldName: 'actSubject',type: 'text', sortable:'true'},
        {label: 'ASSIGNED TO',fieldName: 'actAssigned',type: 'text', sortable:'true'},
        {label: 'VIEW',fieldName: 'actLink',type: 'text', sortable:'true'}
      ]);
        var urlEvent = "/setup/ui/recordtypeselect.jsp?ent=Event&retURL=%2Fa07J000000F0rlH&save_new_url=%2F00U%2Fe%3Fwhat_id=" + parentId + "&retURL" + parentId;
        var urlTask = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/a07J000000F0rlH&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
        var urlCall = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/" + parentId + "&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
        var urlEdit = "/apex/TaskEditRedirectArchived?id=";
        component.set("v.urlEvent", urlEvent);
        component.set("v.urlTask", urlTask);
        component.set("v.urlCall", urlCall);
        component.set("v.urlEdit", urlEdit);
         
          
           helper.getAllActivities(component, event);
          },
        handleColumnSorting: function (component, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        component.set("v.sortedBy", fieldName);
        component.set("v.sortedDirection", sortDirection);
        helper.sortData(component, fieldName, sortDirection);
    },
      goToUrl: function(component, event, helper) {
    var buttonLabel = event.getSource().get("v.label");
    switch (buttonLabel) {
      case "New Event":
        var url = component.get("v.urlEvent");
        var win = window.open(url, '_blank');
        // win.focus();
        break;
      case "New Task":
        var url = component.get("v.urlTask");
        var win = window.open(url, '_blank');
        // win.focus();
        break;
      case "Log a Call":
        var url = component.get("v.urlCall");
        var win = window.open(url, '_blank');
        // win.focus();
        break;
    }
  },


})

Lightning Helper
({
    getAllActivities : function(component, event) {
        var action = component.get("c.getAllActivities");
        var data = component.get("v.allActivityWrapper");
        console.log('actData '+data);
        var parentId = component.get("v.parentId");
        var returnJson;
        var returnValue;
        var state;
        action.setParams({
            parentId : '001m000000box8NAAQ'
        })
        action.setCallback(this, function(response){
            state = response.getState();
            console.log('state is '+state);
            console.log('action is '+action);
            if(state === 'SUCCESS'){
                returnJson = response.getReturnValue();
                console.log('***** response returnJson ' + returnJson.length);
                if (returnJson.length > 0) {
                    console.log('***** response returnJson actId is  ' + returnJson[0].actId);
                    console.log('***** response returnJson actDueDate is  ' + returnJson[0].actDueDate);
                    console.log('***** response returnJson actPrimaryContact is  ' + returnJson[0].actPrimaryContact);
                    console.log('***** response returnJson actType is  ' + returnJson[0].actType);
                    console.log('***** response returnJson actSubType is  ' + returnJson[0].actSubType);         
                    console.log('***** response returnJson actFullDesc is  ' + returnJson[0].actFullDesc);
                    console.log('***** response returnJson actSubject is  ' + returnJson[0].actSubject);
                    console.log('***** response returnJson actAssigned is  ' + returnJson[0].actAssigned);
                    console.log('***** response returnJson actLink is  ' + returnJson[0].actLink);                 
                     component.set("v.data", returnJson);
                    console.log('***** after component set  ');
                } 
            }else if (state === 'ERROR'){
                var errors = response.getError();
                if (errors) {
                    if (errors[0] && errors[0].message) {
                        console.log("Error message: " +errors[0].message);
                    }
                } else {
                    console.log("Unknown error");
                }
            }else{
                console.log('Something went wrong, Please check with your admin');
            }
        });
        $A.enqueueAction(action);           
    },
    
    sortData: function (component, fieldName, sortDirection) {
        var data = component.get("v.data");
        var reverse = sortDirection !== 'asc';
        data.sort(this.sortBy(fieldName, reverse))
        component.set("v.data", data);
    },
     
    sortBy: function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
        function(x) {return x[field]};
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    },

        
   
        
})