title: Ionic items of list not full width
body: <p>I'm doing a simple Ionic app for a friend, it consists of two simple pages.
  I'm not that knowledgable of HTML and CSS but I'm working my way around it.</p>
  
  <p>So I'm trying to do a list of items that occupy the full width of the screen, but there's always a strange distance between the left of the screen and the actual items.
  Each item is clickable and I can click on the item on that space in between. </p>
  
  <p>Here is the relevant (I think) HTML code:</p>
  
  <pre><code>    &lt;ion-list class="list" lines="none" inset="false"&gt;
          &lt;ion-item button *ngFor="let item of (results | async)" [routerLink]="['/', 'item', item.imdbID]" detail="false"&gt;
              &lt;div class="card"&gt;
                  &lt;img class="img" src="https://br.web.img3.acsta.net/medias/nmedia/18/83/56/27/20121066.jpg"&gt;
                  &lt;div class="background-transparent"&gt;
                      &lt;ion-label class="list-item-title"&gt;{{ item.Title }}&lt;/ion-label&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  </code></pre>
  
  <p>Here is the relevant (again I think) CSS code:</p>
  
  <pre><code>.list {
      width: 120%;
      margin-top: 10px;
      margin-bottom: 0 !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      .card {
          margin: 0;
          background: black;
          .img {
              width: 110%;
              padding: 0;
          }
          .list-item-title {
              font: 15px arial, sans-serif;
              position: absolute;
              /* Position the background text */
              bottom: 0;
              /* At the bottom. Use top:0 to append it to the top */
              background: rgb(0, 0, 0);
              /* Fallback color */
              background: rgba(0, 0, 0, 0.7);
              /* Black background with 0.5 opacity */
              color: #f1f1f1;
              /* Grey text */
              width: 100%;
              /* Full width */
              padding: 7px;
              /* Some padding */
          }
      }
  }
  </code></pre>
  
  <p>Here is a photo of how it's now:</p>
  
  <p><a href="https://i.stack.imgur.com/aVay2.png" rel="nofollow noreferrer">Relevant part of the screen</a></p>
  
  <p>Thank you for any help.</p>