Search code examples
csstimerwidth

CSS Timer text moves when it comes at number 1

Does anybody knows how to change the width of a character? I have a timer and the position is good, but when it comes at number 1, the width of the timer will be smaller. It should be the same position all the time. Is there anybody who knows the solution for this? I'm using Digital-7 as font.

CSS: 

#time {
                        font-family: digital-7;
                        font-size: 60px;
                        position: absolute;
                        margin: auto;
                        top: 65px;
                        left: 342px;
                        color: white;
                        text-align: right;
                        display: block;
                        width: 30px;
                        text-align: right;
                        letter-spacing:5px;
                    }

HTML:

<span id="time"></span>
Solution

  • the problem is, that you are using font that is not monospaced (all letters use same "invisible box" placed behind), so the solution for you, can be to switch the font - and this requires no additional coding.

    Your font is also provided as monospaced, so try it out > digital-7