title: How do I remove/change the padding from "display: flex;"
body: <p>Between &quot;user&quot; and &quot;comment&quot; there is a padding that I didn't specify, and which I presume comes from the &quot;display: flex;&quot;. I want to remove or change the size of the padding, but I can't seem to figure out how. Here is the code:</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>body {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  .controls, .commentcontent {
      display: flex;
      flex-direction: column;
  }
  .controls {
      align-items: center;
  }
  
  .commentcontent {
      width: 100%;
  }
  
  .upvote, .downvote, .votes {
      width: 10px;
      height: 10px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .votecount {
      font-size: 12px;
      font-weight: bold;
      width: 30px;
  }
  .upvote:hover, .downvote:hover {
      background-color: rgba(200, 200, 200, 1);
  }
  .upvote:active, .downvote:active {
      background-color: rgba(150, 150, 150, 1);
  }
  
  .noselect {
      user-select: none;
  }
  
  .comment {
      display: flex;
      border: 1px solid rgba(0, 0, 0, 0.33);
      border-radius: 10px;
      overflow: hidden;
      margin: 5px 0;
      width: 50%;
      min-height: 150px;
  }
  
  .commentbody {
      padding: 0 10px;
  }
  
  .commentbody pre {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
  }
  
  .commentinfo {
      font-size: 12px;
      color: grey;
      padding: 5px 10px;
  }
  
  .author a {
      text-decoration: none;
      color: grey;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="comment"&gt;
      &lt;div class="controls"&gt;
          &lt;div class="upvote noselect"&gt;&amp;#8593;&lt;/div&gt;
          &lt;div class="votes"&gt;1&lt;/div&gt;
          &lt;div class="downvote noselect"&gt;&amp;#8595;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="commentcontent"&gt;
          &lt;div class="commentinfo"&gt;
              &lt;div&gt;
                  &lt;span class="author"&gt;user&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="commentbody"&gt;
              &lt;pre id="commentarea"&gt;Comment&lt;/pre&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I tried changing the &quot;align-items&quot; and &quot;justify-content&quot; to &quot;flex-start&quot; but that won't solve the issue. I have also tried setting the padding and margin to 0 in the body selector but that didn't work too. How do I remove/change this padding?</p>