title: trouble implementing card like view in html and css
body: <p>Expected output image illustration:</p>
  
  <p><img src="https://i.stack.imgur.com/ASQB3.jpg" alt="expected output image illustration">    </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>html, body 
  {
  
      max-width: 100vw;
      max-height: 100vh;
  }
  html *
  {
    font-family: Arial !important;
  }
  .cand1
  {
      width: 50%;
      float:left;
  }
  .cand2
  {
      width:50%;
      float: right;
  }
  .prof1,.prof2
  {
      margin:0;
      margin-top: 40;
      text-align: center;
  }
  .name
  {
      font-weight: bold;
  }
  .post
  {
      font-weight: bolder;
   
  
  }
  .card
  {
      
      background: rgb(230, 230, 230);
      
  }
  h4
  {
  
      
      background: rgb(230, 230, 230);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="styles/style_vote.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="header"&gt;&lt;/div&gt;
    &lt;div id="wrapper"&gt;
      &lt;div id="content"&gt;
  
        &lt;div class="card"&gt;
          &lt;h4 class="post"&gt;Post 1&lt;/h4&gt;
          &lt;div class="cand1"&gt;
            &lt;div class="prof1"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 1&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cand2"&gt;
            &lt;div class="prof2"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 2&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="card"&gt;
          &lt;h4 class="post"&gt;Post 2&lt;/h4&gt;
          &lt;div class="cand1"&gt;
            &lt;div class="prof1"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 3&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cand2"&gt;
            &lt;div class="prof2"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 4&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="card"&gt;
          &lt;h4 class="post"&gt;Post 3&lt;/h4&gt;
          &lt;div class="cand1"&gt;
            &lt;div class="prof1"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 5&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cand2"&gt;
            &lt;div class="prof2"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 6&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="card"&gt;
          &lt;h4 class="post"&gt;Post 4&lt;/h4&gt;
          &lt;div class="cand1"&gt;
            &lt;div class="prof1"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 7&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="cand2"&gt;
            &lt;div class="prof2"&gt;
              &lt;img src="images/dummy1.jpg"&gt;
              &lt;p class="name"&gt;Candidate 8&lt;/p&gt;
              &lt;p class="add"&gt;Class&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Current output image:</p>
  
  <p><img src="https://i.stack.imgur.com/LWEdA.png" alt="current output image">
  I am trying to implement a card like style with html and css.
  the h4 tag in the div card produces spaces ,on using margin 0 and padding 0 in css it produces a white line ,I also couldn't find to split each card,tried margin as well as padding attributes for the card div,doesn't seem to work.</p>
  
  <p>also the attributes i apply on the entire card div doesn't seem to apply on the h4 tag, modifying other attributes such as height on the card div makes the dummy image pop out of the card div section</p>