title: Making div background less than 100% width in CSS?
body: <p>I have simple contact form, but I'd like it to have a bit of a background around it. However, simply putting <code>background-color</code> doesn't work how I would like it to. The background color is the full width of the page, but I only want it to cover a small area around the contact form. I've put a picture as to something along the lines of what I'd like it to look like. 
  <a href="https://i.stack.imgur.com/Mhr91.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Mhr91.png" alt="Example of what is required"></a>
  HTML: </p>
  
  <pre><code>&lt;div class="contact"&gt;
      &lt;form action="/action_page.php"&gt;
          &lt;input type="text" id="fname" name="firstname" placeholder="Your name"&gt;&lt;br&gt;
          &lt;input type="text" id="lname" name="lastname" placeholder="Your last name"&gt;&lt;br&gt;
          &lt;textarea rows="10" placeholder="Type Message"&gt;&lt;/textarea&gt;&lt;br&gt;
          &lt;input type="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>    .contact {
      text-align: center;
      background-color: #E0E0E0;
  }
  
  input[type=text] {
      width: 20%; 
      padding: 6[enter image description here][1]px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      box-sizing: border-box; 
      margin-top: 6px; 
      margin-bottom: 16px; 
  }
  
  textarea {
      width: 45%; 
      padding: 6px; 
      border: 1px solid #ccc; 
      border-radius: 4px; 
      box-sizing: border-box; 
      margin-top: 6px; 
      margin-bottom: 16px; 
  }
  
  input[type=submit] {
      background-color: #4CAF50;
      color: white;
      padding: 12px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
  }
  
  input[type=submit]:hover {
      background-color: #45a049;
  }
  </code></pre>