Extra margin in div when trying to center the element

Bennpoes 0
Viewed 39

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 class="h1">Current Time</h1>

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

  </body>
</html>

css html
4 Answers

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 class="h1">Current Time</h1>

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

  </body>
</html>

UmairFarooq0

You can add margin: 0px auto 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;
  /*NEW ###########*/
  margin: 0px auto;
  /*###############*/
}

.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 class="h1">Current Time</h1>

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

  </body>
</html>

raulwwq00 
 .h1{
 color: rgb(0, 238, 25
 display: flex;
 justify-content: center;
 padding-top: 25px;
 }
 
 *{
   margin: 0;
   padding: 0;
   background: rgb(5, 52, 128);
 }
 
 body{
 display:flex;
 flex-direction:column;
 }
 
 
 
 
 .datetime{
   height: 80vh;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   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;
 align-self:center;
 
 }

Hi,

Just added flex into body and move all styles into .datetime.

marcinsmok0

Firstly you don't have a parent container which will hold the h1 and clock div after adding that div give it a width of 100% so it can take the full width of view port then you can give the flex properties as you desired you can re-write your code like this

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

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

.mainDiv{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#clock{
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*NEW ###########*/
  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>
    <div class="mainDiv">
      <h1 class="h1">Current Time</h1>

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

Sankalp Sachan0
Related