Extra margin in div when trying to center the element-CodePudding

I want to center a div element. But when I center my div element with display:flex; using justify-content:center;, align-items:center;, flex-direction:column; I can't center it in the center of the web browser window. I have tried to use position: fixed; but that didn't work either. When checking my div element with Inspect Element I can see that I have extra margin on the right side of the div. Removing it with margin:0px; is also not working.

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
}

#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 >Current Time</h1>

    <!-- digital clock -->
    <div id="clock" >
      <div >
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div >
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

CodePudding user response：

because it has no width added width:100vw & box-sizing:border-box; to contain the padding & margins.

for box-sizing:border-box;you should give this a read:https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
  box-sizing:border-box; /*added*/
}

#clock{
  height: 80vh;
  width:100vw;/*added*/
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 >Current Time</h1>

    <!-- digital clock -->
    <div id="clock" >
      <div >
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div >
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>

CodePudding user response：

You can add margin: 0px auto and also left: 0 and rigth: 0 to center the clock horizontally.

.h1{
  color: rgb(0, 238, 255);
  display: flex;
  justify-content: center;
  padding-top: 25px;
}

*{
  margin: 0;
  padding: 0;
  background: rgb(5, 52, 128);
}

#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0px auto;
  left: 0;
  right: 0;
}

.datetime{
  color: #ffffff;
  background-color: rgb(5, 52, 128);
  font-family: "Segoe UI", sans-serif;
  width: 338px;
  padding: 15px 10px;
  border: 3px solid hsl(207, 80%, 52%);
  border-radius: 5px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>The Digital Time</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1 >Current Time</h1>

    <!-- digital clock -->
    <div id="clock" >
      <div >
        <span id="dayname">Day</span>
        <span id="daynum">Num</span>
        <span id="month">Month</span>
        <span id="year">Year</span>
      </div>
      <div >
        <span id="hour">00</span>:
        <span id="minutes">00</span>:
        <span id="seconds">00</span>
        <span id="period">AM</span>
      </div>
    </div>

  </body>
</html>