I want to place these 3 buttons in a circle under the timer
I want to place these 3 buttons in a circle under the timer. Please see images for reference. I’m trying to put these 3 buttons inside the circle but it always crashes my layout. I have attached my code and css- please check it
.circle { margin: 0 auto; width: 350px; height: 350px; line-height: 320px; border-radius: 50%; text-align: center; border: 10px solid #666; border-style: double; } .circleContent { display: inline-block; color: #fff; font-size: 40px; width: 60px; } .circleContent-span { color: #fff; font-size: 40px; }<body> <div class="container mt-5"> <div> <h1 class="title">Stop Watch</h1> </div> <div class="circle mt-5"> <div> <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="msec" class="circleContent">00</h1> </div> </div> <div> <button onclick="start()">Start</button> <button onclick="stop()">Stop</button> <button onclick="reset()">Reset</button> </div> </div> </body> .circle { margin: 0 auto; width: 350px; height: 350px; line-height: 320px; border-radius: 50%; text-align: center; border: 10px solid #666; border-style: double; } .circleContent { display: inline-block; color: #fff; font-size: 40px; width: 60px; } .circleContent-span { color: #fff; font-size: 40px; } Buttons [![enter image description here][1]][1] Circle [![enter image description here][2]][2] [1]: https://i.stack.imgur.com/v5Qve.png [2]: https://i.stack.imgur.com/VaIH2.png 
Something like this will help
<div class="container mt-5 h-position-relative"> <div> <h1 class="title">Stop Watch</h1> </div> <div class="circle mt-5"> <div> <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="msec" class="circleContent">00</h1> </div> </div> <div class="h-position-absolute h-tl"> <button onclick="start()">Start</button> <button onclick="stop()">Stop</button> <button onclick="reset()">Reset</button> </div> </div> CSS:
.h-position-relative{ position:relative; } .h-position-absolute{ position:absolute; } .h-tl{ top:smth; left:smth; } 
If you want something like this 
Than this will help:
<!DOCTYPE html> <html> <head> <style> body { background-color: lightblue; } .circle { margin: 0 auto; width: 350px; height: 350px; line-height: 320px; border-radius: 50%; text-align: center; border: 10px solid #666; border-style: double; } .circleContent { display: inline-block; color: #fff; font-size: 40px; width: 60px; } .circleContent-span { color: #fff; font-size: 40px; } .h-position-relative{ position:relative; } .h-position-absolute{ position:absolute; } .h-tl{ top:350px; left:250px; } </style> </head> <body> <div class="container mt-5 h-position-relative"> <div> <h1 class="title">Stop Watch</h1> </div> <div class="circle mt-5"> <div> <h1 id="hour" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="min" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="sec" class="circleContent">00</h1><span class="circleContent-span">:</span> <h1 id="msec" class="circleContent">00</h1> </div> </div> <div class="h-position-absolute h-tl"> <button onclick="start()">Start</button> <button onclick="stop()">Stop</button> <button onclick="reset()">Reset</button> </div> </div> </body> </html> 
