title: Remove padding from inside ion-item - Ionic 2 AngularJS 2
body: <p>Here's my <code>scss</code> file:</p>
  
  <pre><code>page-home {
  
      .scroll-content{
          padding: 8px;
      }
  
      ::-webkit-scrollbar,
      *::-webkit-scrollbar {
          display: none;
      }
  
      .item {
          border: solid #dddddd;
          border-radius: 2px;
          border-width: 1.5px;
          padding: 0 !important;
          margin-bottom: 8px;
      }
  
      img.imgmg {
          width: 100%;
          height: auto;
      }
  
  }
  </code></pre>
  
  <p>and this is my <code>html</code> file:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar color="primary"&gt;
      &lt;ion-title text-center&gt;
        App Name
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;ion-list&gt;
      &lt;ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap&gt;
        &lt;ion-thumbnail&gt;
          &lt;img class="imgmg" src="..."&gt;
        &lt;/ion-thumbnail&gt;
        &lt;div&gt;...&lt;/div&gt; 
        &lt;h2&gt;Text&lt;/h2&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Strangely, the padding set to <strong>0 !important</strong> in the scss file removes the padding only on the left side of the ion-item, keeping the padding at the top and right side.</p>
  
  <p><a href="https://i.stack.imgur.com/FS05S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FS05S.png" alt="enter image description here"></a></p>
  
  <p><strong>Edit</strong></p>
  
  <p><code>scss</code>:</p>
  
  <p>page-home {</p>
  
  <pre><code>    .scroll-content{
          padding: 8px ;
      }
  
      .label { 
          margin: 0 0 0 0; 
      }
  
      ::-webkit-scrollbar,
      *::-webkit-scrollbar {
          display: none;
      }
  
      h2.title {
          font-size: 20px;
          margin-top: -8px;
          margin-left: 16px;
      }
  
      .item {
          border: solid #dddddd;
          border-radius: 2px;
          border-width: 1.5px;
          padding: 0 !important;
          margin-bottom: 8px;
      }
  
      div.bar {
          padding: 8px;
      }
  
      img.imgmg {
          width: 100%;
          height: auto;
      }
  
      img.ndp {
          width: 36px;
          height: 36px;
      }
  
      div.ndph {
          margin-left: 8px;
      }
  
  }
  </code></pre>
  
  <p><code>html</code>:</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-navbar color="primary"&gt;
      &lt;ion-title text-center&gt;
        App Name
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content&gt;
    &lt;ion-refresher (ionRefresh)="doRefresh($event)"&gt;
      &lt;ion-refresher-content&gt;&lt;/ion-refresher-content&gt;
    &lt;/ion-refresher&gt;
      &lt;ion-list&gt;
        &lt;ion-item *ngFor="let entry of entries" (click)="openPage(entry)" text-wrap&gt;
          &lt;ion-thumbnail&gt;
            &lt;img class="imgmg" src="..url image.."&gt;
          &lt;/ion-thumbnail&gt;
          &lt;div class="bar"&gt;
            &lt;div style="display:inline-block; vertical-align: middle;"&gt;
              &lt;img class="ndp" src="..url image.."&gt;
            &lt;/div&gt;
            &lt;div style="display:inline-block; vertical-align: middle;" class="ndph"&gt;
              &lt;p&gt;&lt;strong&gt;&lt;font color="#343434"&gt;Text&lt;/font&gt;&lt;/strong&gt;&lt;/p&gt;
              &lt;p&gt;Text&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt; 
        &lt;h2 class="title"&gt;Title text&lt;/h2&gt;
      &lt;/ion-item&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;
  </code></pre>