CSS：

<style type="text/css">
    html, body {
border: 1px solid;
width: 210mm;
height: 297mm;
margin: 0;
padding: 0;
}
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
 }
h1 {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
 }
h2 {
  font-size: 24px;
  font-weight: bold;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section {
  margin-bottom: 30px;
}
.section h2 {
  margin-top: 0;
}
.grid-container {
 display: grid;
 grid-template-columns: 40% 60%;
 }
.grid-item1{
    background-color: #0d315f;
    color: white;
    height: 297mm;
    padding-left: 20px;
}
.grid-item2{
    color:black;
    height: 297mm;
    padding-left: 20px;
}
.banner{
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    background-color: #1d334f;
}
.bold{
    font-weight: bold;
}
.email{
    padding:0 !important;
    margin:0 !important;

}

超文本：

<div class="grid-container">
<div class="grid-item1">
      <section class="section">
        <h1>John<br>Doe</h1><br>
        Student
        <div class="banner">Personal Info</div>
        <p class="bold">Email</p> 
        <p>yahdic@gmail.com</p>
        <p class="bold">Phone</p> 
        <p>7306219032</p>
      </section>

      <section class="section">
        <div class="banner">Skills</div>
        <ul>
          <li>CSS</li>
          <li>HTML</li>
          <li>PYTHON</li>
          <li>PHP</li>
          <li>C++</li>
        </ul>
      </section>

      <section class="section">
        <div class="banner">Hobbies</div>
        <ul>
          <li>Reading</li>
          <li>Watching Movies</li>
          <li>Cycling</li>
          <li>Music Listening</li>
          <li>Coding</li>
        </ul>
      </section>
      
 </div>
 <div class="grid-item2">

      <section class="section">
        <h2>Education</h2>
        <ul>
          <li>
            <h3>Degree Program</h3>
            <p><strong>University Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <p>GPA: X.XX/4.00</p>
          </li>
          <li>
            <h3>Degree Program</h3>
            <p><strong>University Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <p>GPA: X.XX/4.00</p>
          </li>
        </ul>
      </section>
      <section class="section">
        <h2>Experience</h2>
        <ul>
          <li>
            <h3>Job Title</h3>
            <p><strong>Company Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <ul>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
            </ul>
          </li>
          <li>
            <h3>Job Title</h3>
            <p><strong>Company Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <ul>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
            </ul>
          </li>
        </ul>
      </section>
    </div>
    </div>

在p标签之间有多余的空格，比如email和实际的email。问题不在于行高，我找不到填充/边距哪里出错了。还有，对于banner类（有“个人信息”和“技能”），即使没有边距/填充，背景颜色也没有到达整个左边部分。为什么？