Newbie CSS formatting issue-CodePudding

First question on here. Hope i have posted it correctly.

Following a DOM manipulation YouTube course here to make a Javascript stopwatch.

For some reason i can't seem to center my starter zero's.

Can't get to the bottom of it.

Any help appreciated.

//My Mark Up//




<body>
    <div >
      <div id="timer">00:00:00</div>

      <div >
        <button id="startStopBtn">
          <i  id="play"></i>
        </button>

        <button id="resetBtn">
          <i  id="reset"></i>
        </button>
      </div>
    </div>

//Their Mark Up://

<div >
        <div id="timer">
            00:00:00
        </div>
        <div >
            <button id="startStopBtn">
                <i  id="play"></i>
            </button>
            <button id="resetBtn">
                <i  id="reset"></i>
            </button>
        </div>

//MY CSS://

body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-  empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}

button i {
  font-size: 2rem;
  padding: 10px;
  color: #fff;
  width: 50px;
}

#play {
  background-color: green;
}
#pause {
  background-color: orange;
}
#reset {
  background-color: red;
}

//Their CSS//

body {
    height: 100vh;
    background: url(img/project-4.jpg) no-repeat center top / cover;
    display: flex;
    justify-content: center;
    align-items: center;
   }
   .container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow:  0 0 3px;
   }
   #timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
   }
   .buttons {
    text-align: center;
   }
   button {
    margin: 0 10px;
    border: none;
   }
   button i {
    font-size: 2rem;
    padding: 10px;
    color: #fff;
    width: 50px;
   }
   #play {
    background-color: green;
   }
   #pause {
    background-color: orange;
   }
   #reset {
    background-color: red;
   }

CodePudding user response：

You just have to remove the width from #timer or give it a max-width: 100%; instead of width: 100%;.

See the snippet below.

body {
  height: 100vh;
  background: url(https://d1s9j44aio5gjs.cloudfront.net/2021/10/Underwater-empty-pool.jpg)
    no-repeat center top / cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 60%;
  height: 250px;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 3px;
}

#timer {
  max-width: 100%;
  font-size: 72px;
  text-align: center;
  margin: 0px auto;
  padding: 35px;
}

.buttons {
  text-align: center;
}

.button {
  margin: 0 10px;
  border: none;
}

<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />

    <link rel="stylesheet" href="./style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>

  <body>
    <div >
      <div id="timer">00:00:00</div>

      <div >
        <button id="startStopBtn">
          <i  id="play"></i>
        </button>

        <button id="resetBtn">
          <i  id="reset"></i>
        </button>
      </div>
    </div>
  </body>
</html>

CodePudding user response：

I assume that there might be some different between your browser's default stylesheet vs the tutor's.

The way I would fix this is to change box-sizing of #timer to be border-box. You can find more detail about that attribute here. You can see that with content-box, it behaves like your example as it doesn't take padding as part of element width so it overflows when you set the element width to 100%.

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    height: 250px;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0 0 3px;
}

#timer {
    width: 100%;
    font-size: 72px;
    text-align: center;
    margin: 0px auto;
    padding: 35px;
    box-sizing: border-box; /* This is what you need if you use padding otherwise the padding won't get considered */
}

<body>
    <div >
        <div id="timer">00:00:00</div>
    </div>
</body>

CodePudding user response：

remove width:100% from #timer or replace it with max-width:100%

100% width does not leave any space for margin.

margin:0 auto will work only on a width less than 100%.