Question posted in 
warning: I am new to programming and I am trying to help a friend out. Yes I did ask chatgpt for help before this and it wasn’t working out.
My friend made a website through shopify and he wanted a countdown timer to be coded for him since they don’t have that on shopify. I decided to try to program it myself and I have it basically done but I can’t center it. As dumb as that may sound I have tried everything of my knowledge within the styling to center it in the middle of the screen but I can’t. How do I do this?
body {
background-color: #fff;
/* White background */
}
.wrap {
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
margin: auto;
height: 310px;
display: flex;
/* Enable flexbox */
justify-content: center;
/* Center horizontally */
align-items: center;
/* Center vertically */
}
a {
text-decoration: none;
color: #fff;
/* White links */
}
/* Title */
h1 {
margin-bottom: 60px;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 2.25em;
font-weight: 300;
text-transform: uppercase;
}
h1 strong {
font-weight: 400;
color: #fdd835;
/* Yellow accent */
}
h2 {
margin-bottom: 80px;
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 0.7em;
font-weight: 300;
text-transform: uppercase;
}
h2 strong {
font-weight: 400;
}
.countdown {
width: 720px;
margin: 0 auto;
}
.bloc-time {
float: left;
margin-right: 45px;
text-align: center;
}
.bloc-time:last-child {
margin-right: 0;
}
.count-title {
display: block;
margin-bottom: 15px;
font-family: 'Lato', sans-serif;
font-size: 0.94em;
color: #fff;
/* White text for countdown labels */
text-transform: uppercase;
}
.figure {
position: relative;
float: left;
height: 110px;
width: 100px;
margin-right: 10px;
background-color: #fdd835;
/* Yellow background */
border-radius: 8px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.2), inset 2px 4px 0 0 rgba(255, 255, 255, 0.08);
}
.figure:last-child {
margin-right: 0;
}
.figure>span {
position: absolute;
left: 0;
right: 0;
margin: auto;
font-family: 'Lato', sans-serif;
font-size: 5.94em;
font-weight: 700;
line-height: 107px;
color: #000;
/* Black text */
}<div id="countdown-timer">
<h3>Time Left in This Week's Sale:</h3>
<div id="timer">
<span id="days">00</span>d:
<span id="hours">00</span>h:
<span id="minutes">00</span>m:
<span id="seconds">00</span>s
</div>
</div>
2
Answers
You are targeting
.wrapbut you don’t have a class called that in your html. If you update that, and also give the element 100% width and height, it centres.You are targeting .wrap but you don’t have a class