Override CSS class to remove padding

Question

I am not that familiar with CSS and have a very basic question. I simply want to remove right and left padding from the following "div":

<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1">

"sapUixxx" classes are provided by a framework and cannot be adjusted directly. Therefore I declared a new css class "noPaddingRightLeft" and added it to the div:

.sapUiRespGridHSpace1 .noPaddingRightLeft{
padding: 0 0; }

When I check the result in the Chrome debugger tools it looks like this:

CSS at Runtime

There is no sign of my class "noPaddingRightLeft" though it's in the class list of the element. How can I override sapUixxx css files correctly?

Thanks for help

Tobias

Answer 1

Add the important flag to your css

.class {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

Answer 2

Add this to your css:

   .sapUiRespGrid.sapUiRespGridHSpace1 {
        padding: 0;
    }

Answer 3

Do:

<div id="__grid2" data-sap-ui="__grid2" class="noPaddingRightLeft sapUiRespGrid sapUiRespGridHSpace1 sapUiRespGridMedia-Std-LargeDesktop sapUiRespGridVSpace1" style = "padding: 0">

Or create the css class as following:

 #__grid2{
   padding: 0 !important;
}