title: How to create a CSS border for this CV?
body: <p>I created a cv using HTML and CSS. But I tried to apply a CSS border around it but it didn't work.</p>
  <p>The cv here is displayed in the center of the web page.
  <strong>The HTML and CSS codes of the CV are shown below.</strong>
  When adding the Border, if you want, change the HTML and CSS codes that I have already coded.</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: sans-serif, Arial, Helvetica, sans-serif;
    margin-top: 0;
  }
  
  
  /*********Header Section************/
  
  #name {
    text-align: center;
    color: white;
  }
  
  #tp-no {
    text-align: center;
    padding-top: 5px;
    color: white;
  }
  
  #mail {
    text-align: center;
    margin-top: -3px;
    color: white;
  }
  
  header {
    line-height: 4px;
  }
  
  #name .color-name {
    color: #14a800;
  }
  
  header {
    padding-top: 10px;
    margin: auto;
    max-width: 700px;
    background-color: #3c4041f1;
    height: 6rem;
  }
  
  
  /*********main-details-sec************/
  
  #main-details-sec {
    margin-top: 3em;
  }
  
  .column {
    float: left;
    width: 50%;
  }
  
  #main-details-sec {
    content: "";
    display: table;
    clear: both;
    margin: auto;
    max-width: 600px;
  }
  
  .ol-list {
    line-height: 25px;
  }
  
  .education {
    color: #14a800;
  }
  
  .personal {
    color: #14a800;
  }
  
  .school {
    color: #14a800;
  }
  
  .contact {
    color: #14a800;
  }
  
  span {
    font-weight: bold;
  }
  
  
  /*********second-details-sec************/
  
  #second-details-sec {
    margin: auto;
    max-width: 600px;
  }
  
  .other-edu {
    color: #14a800;
  }
  
  .Extra {
    color: #14a800;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="style.css"&gt;
    &lt;title&gt;My CV&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
    &lt;header&gt;
      &lt;h1 id="name"&gt; &lt;span class="color-name"&gt;Pathum&lt;/span&gt; Sandeepa&lt;/h1&gt;
      &lt;h4 id="tp-no"&gt;+94 76 XXXX XXX&lt;/h4&gt;
      &lt;h4 id="mail"&gt;pathumXXXXXXX@gmail.com&lt;/h4&gt;
    &lt;/header&gt;
  
    &lt;div id="main-details-sec"&gt;
  
      &lt;!--Education Details--&gt;
      &lt;div class="column"&gt;
        &lt;h2 class="education"&gt;Education&lt;/h2&gt;
  
        &lt;h4 class="exam-ol"&gt;G.C.E (O/L) Examination (XXXX)&lt;/h4&gt;
        &lt;ul class="ol-list"&gt;
          &lt;li&gt;Mathematics &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;ICT &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Sinhala &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Buddhist &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;History &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Science &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Life Skill &amp; Civic Education &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Art &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;English &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;h4 class="exam-al"&gt;G.C.E (A/L) Examination (XXXX)&lt;/h4&gt;
        &lt;ul class="al-list"&gt;
          &lt;li&gt;Science for Technology &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Information &amp; Communication Technology &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;Engineering Technology &lt;span&gt;X&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
      &lt;/div&gt;
  
  
  
      &lt;!--Personal Details--&gt;
      &lt;div class="column"&gt;
        &lt;div class="personal-details"&gt;
          &lt;h2 class="personal"&gt;Personal Details&lt;/h2&gt;
  
          &lt;ul class="personal-list"&gt;
            &lt;li id="personal-data"&gt; Full Name - Pathum XXXXXXX XXXXXXXXXXXXXX&lt;/li&gt;
            &lt;li id="personal-data"&gt; Name with initials - X.X. Pathum XXXXXXXX&lt;/li&gt;
            &lt;li id="personal-data"&gt; Date of Birth - XXXX.XX.XX&lt;/li&gt;
            &lt;li id="personal-data"&gt; Gender - Male&lt;/li&gt;
            &lt;li id="personal-data"&gt; NIC No - XXXXXXXXXX&lt;/li&gt;
            &lt;li id="personal-data"&gt; Marital Status - Single&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;!--School--&gt;
        &lt;div class="school-details"&gt;
          &lt;h2 class="school"&gt;School&lt;/h2&gt;
  
          &lt;ul class="school-list"&gt;
            &lt;li id="school-data"&gt;XP/XT XXXXXXXXXX XXXX Vidyalaya&lt;/li&gt;
            &lt;li id="school-data"&gt;X.X.X.XXXXXXXXX Central College, XXXXXXXX&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;!--Contact--&gt;
        &lt;div class="contact-details"&gt;
          &lt;h2 class="contact"&gt;Contact&lt;/h2&gt;
  
          &lt;ul class="contact-list"&gt;
            &lt;li id="school-data"&gt;Mobile No- XXXXXXXX&lt;/li&gt;
            &lt;li id="school-data"&gt;Gmail- pathumXXXXXXXXXXX.com&lt;/li&gt;
            &lt;li id="school-data"&gt;Address- XXXXXXXX, XXXXXXXXXX&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
  
  
    &lt;/div&gt;
  
    &lt;div id="second-details-sec"&gt;
  
      &lt;div class="other-edu-details"&gt;
        &lt;h2 class="other-edu"&gt;Other Education Qualification&lt;/h2&gt;
  
        &lt;ul class="other-edu-list"&gt;
          &lt;li id="other-edu-data"&gt;I followed Certificate Computer Course &lt;strong&gt;(MS Office Packege Certificate/Adobe Photoshop Certificate)&lt;/strong&gt;&lt;/li&gt;
          &lt;li id="other-edu-data"&gt;I have successfully completed The &lt;strong&gt;Preparing to Manage Human Rescources Certificate Course&lt;/strong&gt; conducted by Coursera&lt;/li&gt;
          &lt;li id="other-edu-data"&gt;I successfully completed &lt;strong&gt;The Fundamentals of Digital Marketing Certificate&lt;/strong&gt; from Google Digital Garage&lt;/li&gt;
          &lt;li id="other-edu-data"&gt;I successfully completed &lt;strong&gt;Certificate in Cyber Security &amp; Networking Course&lt;/strong&gt; conducted by Department of Computing NextGen Campus&lt;/li&gt;
          &lt;li id="other-edu-data"&gt;I have studied the &lt;strong&gt;Computer Certificate in Hardware Course&lt;/strong&gt; issued by Aono Naoko Vocational Computer Training Institute and obtained the certificate&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div class="Extra-details"&gt;
        &lt;h2 class="Extra"&gt;Extra Curricular Activities&lt;/h2&gt;
  
        &lt;ul class="Extra-list"&gt;
          &lt;li id="Extra-data"&gt;I have Dhamma School exam Certificates&lt;/li&gt;
          &lt;li id="Extra-data"&gt;I have won school Art Competitions and obtained art certificates&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Preview:
  <a href="https://i.stack.imgur.com/hwuLU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hwuLU.png" alt="CV Preview" /></a></p>