I do not think you understand the “Container and Flex” idea well enough , you want to move the container that holds the elemetns together to the center ( IF i understand your requirement right) but you are adding your CSS to the element within the container , that is wrong , your goal should be to move the Container that holds both your title and timer to the center , meaning the “Main” div. add the css to the main and voila .
.timer-text {
font-family: "Lucida Console", Monaco, monospace;
text-align: center;
}
.timer {
}
.main{
display:flex;
justify-content: center;
}
I am trying to recreate a JavaScript “LOLCAT clock”, the one found here: https://codepen.io/codifiedconcepts/pen/bwgxRq
I’m close, very close, but I haven’t been able to get my span tags to sit right up close against my selector elements like they do in the example.
For a visual of my goal, check this Imgur link: https://imgur.com/a/jQafd8S
I’ve tried a few code snippets from around StackOverflow, the exact nature of my goal is hard to describe in a unique English phrase, so I’m finding results for people who want to do similar-but-different things. I just want the space between the text “SET WAKE UP TIME” and the Selector to be almost nothing.
Here is some of my HTML and CSS:
css, including two options that at least get the span and selector items onto the same line (something I struggled with for an hour)
.timer-text {
font-family: "Lucida Console", Monaco, monospace;
text-align: center;
}
.timer {
/* OPTION 1: */
/* padding: 5px;
overflow: hidden;
width: 90%;
display: flex;
align-items: flex-start; */
/* OPTION 2: */
display: flex;
align-items: center;
}
<div class="main">
<div class="timer">
<span class="timer-text">SET WAKE UP TIME</span>
<select id="wakeupTimer">
<option value="1">1 AM - 2AM</option>
<option value="2">2 AM - 3AM</option>
<!-- and so on and so forth from 1 am to 12 am -->
<option value="24">12 AM - 1AM</option>
</select>
</div>
</div>
I know it can be done because they do it in the example I linked at the top of the page. But I can’t figure out how it’s being done in that Codepen. I’ve tried copying numerous pieces of CSS from one place to another, nothing works. Someone spell it out for me please?
Thanks for the help everyone! This is literally the 2nd to last piece of the puzzle.