Some html code and output not showing on browser?-CodePudding

I am creating a profile page for users. I have created a form and some fields in it. But whatever part code has been written under the section is not showing on the browser. I tried to inspect the elements, but the code written under the section is not showing on the browser.

.profile-page {
  width: 50%;
  margin: auto;
  background-color: #f4f5fa;
  box-shadow: 2px 2px 5px 2px gray;
}

.profile-heading {
  width: 100%;
  background-color: #0b2b88;
  color: white;
  padding: 10px;
}

.profile-details {
  width: 100%;
  padding: 10px;
}

.input-field {
  display: flex;
  width: 100%;
  margin: auto;
}

.form-heading {
  width: 30%;
}

.form-input {
  width: 30%;
}

.form-input input {
  border: none;
}

.form-button {
  width: 50%;
  text-align: center;
}

.form-button button {
  background-color: #0b2b88;
  color: white;
  padding: 20px;
}

.edit-button {
  width: 30%;
}

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/96c1212185.js" crossorigin="anonymous"></script>

<div >
  <div >
    <h3>Profile Details</h3>
  </div>
  <div >
    <form >
      <div >

        <div >
          <label for="fname">First Name</label>
        </div>

        <div >
          <input type="text" id="fname" name="fname" value="ABC"  readonly />
        </div>

      </div>

      <div >
        <div >
          <label for="email">Email</label>
        </div>
        <div >
          <input type="email" id="email" name="email" value="[email protected]"  readonly/>
        </div>
      </div>

      <div >
        <div >
          <label for="country">Country</label>
        </div>
        <div >
          <select id="country" name="country" >
            <option value="---">---</option>
        </div>
      </div>

      <div >
        <div >
          <button type="submit" id="edit-button" name="" value="" >Edit</button>
        </div>
      </div>
    </form>
  </div>
</div>

CodePudding user response：

select is not closed

<div >
          <select id="country" name="country" >
            <option value="---">---</option>
          </select>
        </div>