HTML & CSS Positioning | Countdown clock is "blocking" my h1 text (Please help)

[kelloggs_cpt]

Good day,

i am a newby at coding; you help and advise will be greatly appreciated.

my countdown clock is "blocking" my h1 text, i think my style sheet needs fixing?

please help
[CODE lang="html" title="Countdown clock"]<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jemma's Confirmation</title>

<!-- This is the Bootstrap CSS -->
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Open+Sans:300,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">


</head>

<body>




<div class="container">
<div class="row">
<div class="col-lg-10 col-sm-6 col-4"><a href="index.html">Jemma's Confirmation</a></div>
<div class="col-lg-1 col-sm-3 col-4">Church Service</div>
<div class="col-lg-1 col-sm-3 col-4"><a href="rsvp.html">Reception Lunch</a></div>
</div>
</div>
<br>
<div>
<h1>You are invited to <br>Jemma Thieras' Confirmation</h1>
</div>

<br>
<br>
<br>


<div id="countdown">
<div id='tiles'></div>
<div class="labels">
<li>Days</li>
<li>Hours</li>
<li>Mins</li>
<li>Secs</li>
</div>
</div>



<!-- This is the Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script src="timer.js"></script>

</body>

</html>[/CODE] [CODE lang="css" title="CSS | Countdown clock positioning"]@font-face { font-family: "Alex Brush"; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } body{ word-wrap:break-word; color: #eee; background: pink; } h1{ text-align: center; font: normal 85px/130px "Alex Brush", "Brush Script MT", sans-serif; word-wrap:break-word; } #countdown{ width: 465px; height: 112px; text-align: center; background: #222; background-image: -webkit-linear-gradient(top, #222, #333, #333, #222); background-image: -moz-linear-gradient(top, #222, #333, #333, #222); background-image: -ms-linear-gradient(top, #222, #333, #333, #222); background-image: -o-linear-gradient(top, #222, #333, #333, #222); border: 1px solid #111; border-radius: 5px; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6); margin: auto; padding: 24px 0; position: relative; top: 0; bottom: 0; left: 0; right: 0; } #countdown:before{ content:""; width: 8px; height: 65px; background: #444; background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); background-image: -moz-linear-gradient(top, #555, #444, #444, #555); background-image: -ms-linear-gradient(top, #555, #444, #444, #555); background-image: -o-linear-gradient(top, #555, #444, #444, #555); border: 1px solid #111; border-top-left-radius: 6px; border-bottom-left-radius: 6px; display: block; position: relative; top: 48px; left: -10px; } #countdown:after{ content:""; width: 8px; height: 65px; background: #444; background-image: -webkit-linear-gradient(top, #555, #444, #444, #555); background-image: -moz-linear-gradient(top, #555, #444, #444, #555); background-image: -ms-linear-gradient(top, #555, #444, #444, #555); background-image: -o-linear-gradient(top, #555, #444, #444, #555); border: 1px solid #111; border-top-right-radius: 6px; border-bottom-right-radius: 6px; display: block; position: relative; top: 48px; right: -10px; } #countdown #tiles{ position: relative; z-index: 1; } #countdown #tiles > span{ width: 92px; max-width: 92px; font: bold 48px 'Droid Sans', Arial, sans-serif; text-align: center; color: #111; background-color: #ddd; background-image: -webkit-linear-gradient(top, #bbb, #eee); background-image: -moz-linear-gradient(top, #bbb, #eee); background-image: -ms-linear-gradient(top, #bbb, #eee); background-image: -o-linear-gradient(top, #bbb, #eee); border-top: 1px solid #fff; border-radius: 3px; box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7); margin: 0 7px; padding: 18px 0; display: inline-block; position: relative; } #countdown #tiles > span:before{ content:""; width: 100%; height: 13px; background: #111; display: block; padding: 0 3px; position: relative; top: 41%; left: -3px; z-index: -1; } #countdown #tiles > span:after{ content:""; width: 100%; height: 1px; background: #eee; border-top: 1px solid #333; display: block; position: relative; top: 48%; left: 0; } #countdown .labels{ width: 100%; height: 25px; text-align: center; position: relative; bottom: 8px; } #countdown .labels li{ width: 102px; font: bold 15px 'Droid Sans', Arial, sans-serif; color: #f47321; text-shadow: 1px 1px 0px #000; text-align: center; text-transform: uppercase; display: inline-block; } [/CODE]

 

[LTomy]

Hi kelloggs_cpt!

The title is overlapping when there is not enough space for all the elements inside the page. Did you set a fixed height to <body>?
Does it change something if you apply the following styles?:

body{
    height: auto;
    min-height: 100%;
    overflow: auto;
}