I don't know what happened to my screen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JS Crash Course</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>JavaScript, I am gonna learn it</h1>
    </header>
    <section class="container">
      <form id="my-form">
        <h1>add User</h1>
        <div class="msg"></div>
        <div>
          <label for="name">Name: </label>
          <input type="text" id="name" />
        </div>
        <div>
          <label for="name">Email: </label>
          <input type="email" id="email" />
        </div>
        <input class="btn" type="submit" value="Send" />
      </form>
      <ul id="Users"></ul>
      <ul class="items">
        <li class="item">item 1</li>
        <li class="item">item 2</li>
        <li class="item">item 3</li>
      </ul>
    </section>
    <script src="main.js"></script>
  </body>
</html>

//css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Ariel, Helvetica, sans-serif;
  line-height: 1.6;
}

ul {
  list-style: none;
}
ul li {
  padding: 5px;
  background: #f4f4f4;
  margin: 5px 0;
}
header {
  background: #f4f4f4;
  padding: 1rem;
  text-align: center;
}
.container {
  margin: auto;
  width: 50px;
  overflow: auto;
  padding: 3rem 2rem;
}
#my-form label {
  display: block;
}
#my-form input [type="text"] {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 5px;
  border: 1px solid #dde;
}
.btn {
  display: block;
  width: 100%;
  padding: 10px 15px;
  border: 0;
  background: #333;
  color: #fff;
  border-radius: 5px;
  margin: 5px 0;
}
btn:hover {
  background: #666;
}
.bg.dark {
  background: #333;
  color: #fff;
}
.error {
  background: green;
  color: #fff;
  padding: 5px;
  margin: 5px;
}


You have defined your container class to only be 50px wide:

.container {
  margin: auto;
  width: 50px;
  overflow: auto;
  padding: 3rem 2rem;
}
2 Likes

Thank you so much i solved it thankfully

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.