Search code examples
htmlcssstyles

Width of page more than 100%?

I've set my width to 100% but there's still a horizontal slider. As you can see, the body seems to end at 100% (and there's 0 padding and margin on the right).

enter image description here

I've tried fiddling with the widths of body and html to no avail. What (why) is that slight space on the right (there) and how shall I remove it (and hence the horizontal slider)?

* {
  font-family: "Press Start 2P";
  color: white;
  background-color: dimgray;
}

body {
  height: 367px;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  background-color: dimgray;
}

html {
  background-color: dimgray;
  width: 100%;
}

td {
  border: 3px solid cornflowerblue;
  width: 179px;
}

tr {
  height: 179px;
}

table {
  /* margin-top: 2.6%; */
  border-collapse: collapse;
  display: inline-block;
  margin: 3.4% 0 2.6% 27.9%;
  width: 40em;
}

.senter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* margin-left: 20%; */
}

#reset {
  width: 14em;
  margin-bottom: 2.1%;
}

form {
  width: 100%;
}

button {
  /* color: red; */
  width: 6.7em;
  height: 2.2em;
  margin-bottom: 0;
}

input {
  width: 14.1em;
  height: 1.7em;
  margin: 3% 0 2.1%;
}

::placeholder {
  padding-left: 7.4%;
  color: lightgray;
}

#nam {
  width: 20%;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin-top: 2.78%;
}

#inLyn {
  /* display: inline-block */
  /* position: relative; */
  height: 60em;
}

span {
  position: absolute;
  width: 20%;
  margin-top: 23.4%;
  font-size: 20px;
  margin-left: 10%;
}

#later {
  position: absolute;
  margin-top: 23.4%;
  margin-left: 6%;
}

#chec {
  margin-top: 27.4%;
}

.left {
  border-left: 0;
}

.bottom {
  border-bottom: 0;
}

.right {
  border-right: 0;
}

.top {
  border-top: 0;
}
<!DOCTYPE html>
<html>

<body>
  <form class="senter">
    <input type="text" id="naym" placeholder="Hoo aar yoo?" />
    <input hidden type="text" name="id" id="id" />
    <button type="button" id="play">Play!</button>
  </form>
  <span>0</span>
  <table class="" align="center">
    <tr>
      <td class="left top" align="center"><img src="#" style="display: none;" /></td>
      <td class="top" align="center"><img src="#" style="display: none;" /></td>
      <td class="right top" align="center"><img src="#" style="display: none;" /></td>
    </tr>
    <tr>
      <td class="left" align="center"><img src="#" style="display: none;" /></td>
      <td align="center"><img src="#" style="display: none;" /></td>
      <td class="right" align="center"><img src="#" style="display: none;" /></td>
    </tr>
    <tr>
      <td class="left bottom" align="center"><img src="#" style="display: none;" /></td>
      <td class=" bottom " align="center"><img src="#" style="display: none;" /></td>
      <td class="right bottom" align="center"><img src="#" style="display: none;" /></td>
    </tr>
  </table>
  <span id="later">0</span> -- -->
  <!-- <div class="senter">
      <button id="reset">NEXT GAME</button>
    </div> -->
</body>

<head>
  <title>TTT!</title>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="styl.css" />
  <!-- <link rel="stylesheet" type="text/css" href="src/styl.css" /> -->
  <!-- <script
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
      type="text/javascript" 
    ></script> -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <!-- <script src="clyint.js"></script> -->
  <script src="script.js"></script>
</head>

</html>

Solution

  • In your table, you have defined that, its width is 40rem. I just removed it and solved for me

    * {
  font-family: "Press Start 2P";
  color: white;
  background-color: dimgray;
}

body {
  height: 367px;
  width: 100%;
  margin-right: 0;
  margin-left: 0;
  background-color: dimgray;
}

html {
  background-color: dimgray;
  width: 100%;
}

td {
  border: 3px solid cornflowerblue;
  width: 179px;
}

tr {
  height: 179px;
}

table {
  /* margin-top: 2.6%; */
  border-collapse: collapse;
  display: inline-block;
  margin: 3.4% 0 2.6% 27.9%;
}

.senter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* margin-left: 20%; */
}

#reset {
  width: 14em;
  margin-bottom: 2.1%;
}

form {
  width: 100%;
}

button {
  /* color: red; */
  width: 6.7em;
  height: 2.2em;
  margin-bottom: 0;
}

input {
  width: 14.1em;
  height: 1.7em;
  margin: 3% 0 2.1%;
}

::placeholder {
  padding-left: 7.4%;
  color: lightgray;
}

#nam {
  width: 20%;
  margin: 0 auto;
  display: block;
  text-align: center;
  margin-top: 2.78%;
}

#inLyn {
  /* display: inline-block */
  /* position: relative; */
  height: 60em;
}

span {
  position: absolute;
  width: 20%;
  margin-top: 23.4%;
  font-size: 20px;
  margin-left: 10%;
}

#later {
  position: absolute;
  margin-top: 23.4%;
  margin-left: 6%;
}

#chec {
  margin-top: 27.4%;
}

.left {
  border-left: 0;
}

.bottom {
  border-bottom: 0;
}

.right {
  border-right: 0;
}

.top {
  border-top: 0;
}
      <form class="senter">
    <input type="text" id="naym" placeholder="Hoo aar yoo?" />
    <input hidden type="text" name="id" id="id" />
    <button type="button" id="play">Play!</button>
  </form>
  <span>0</span>
  <table class="" align="center">
    <tr>
      <td class="left top" align="center"><img src="#" style="display: none;" /></td>
      <td class="top" align="center"><img src="#" style="display: none;" /></td>
      <td class="right top" align="center"><img src="#" style="display: none;" /></td>
    </tr>
    <tr>
      <td class="left" align="center"><img src="#" style="display: none;" /></td>
      <td align="center"><img src="#" style="display: none;" /></td>
      <td class="right" align="center"><img src="#" style="display: none;" /></td>
    </tr>
    <tr>
      <td class="left bottom" align="center"><img src="#" style="display: none;" /></td>
      <td class=" bottom " align="center"><img src="#" style="display: none;" /></td>
      <td class="right bottom" align="center"><img src="#" style="display: none;" /></td>
    </tr>
  </table>
  <span id="later">0</span> -- -->

<head>
  <title>TTT!</title>
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>