title: Change width of a card in HTML
body: <p>I'm a beginner to HTML and I'm making my first website.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.header {
    text-align: center;
    color: #ffffff;
    font-family: tahoma;
  }
  
  body {
    background: linear-gradient(to top right, #39B59D, #139BDA, #0066FF, #061CFF);
    background-attachment: fixed;
  }
  
  .img {
    text-align: center;
  }
  
  .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    border-radius: 10px;
    color: #ffffff;
    width: 500;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  }
  
  .container {
    padding: 2px 16px;
    color: #ffffff width=500;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
    &lt;p style="text-align:center;"&gt;&lt;img src="https://image.ibb.co/nAaqJG/rappatic.png" alt="rappatic"&gt;&lt;/p&gt;
    &lt;div class="container"&gt;
      &lt;h2 class="header"&gt;Hi, I'm rappatic.&lt;/h2&gt;
      &lt;p class="header"&gt;I code when I feel like it.&lt;/p&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, when it is run, the code shows a card that goes across almost the full width of the page. I think this is kind of ugly, though. Is there a way to make the card only stretch across, say, 50 or 60 percent of the page? Or, if that's not possible, make a set amount of pixels?</p>
  
  <p>Thanks in advance.</p>