Countdown ausrichten

Hallo Leute ich habe jetzt ein code für einen countdown aber würde den gerne noch ausrichten weis aber nicht wie. Noch dazu würde ich gerne die texte und button drinnen haben wie auf Bild 2 so schaut es aktuell bei mir aus wie auf Bild 1

HTML:

<div data-date="2019-08-11" data-time="12:00:00" id="countdown">
    <p>
        <span style="color:#FF0000;"><span style="font-size:72px;"><span style="font-family:georgia,serif;"><strong>DEAL DER WOCHE<br />
        <img alt="" src="images/pump-dat-biatch-bam.jpg-2.png" style="width: 200px; height: 200px; float: left;" /></strong></span></span></span><br />
        &nbsp;
    </p>

    <div class="canvas-container">
        <br />
        <br />
        <br />
        <br />
        <br />
        <canvas id="tage"></canvas> <canvas id="stunden"></canvas><br />
        <br />
        <br />
        <canvas id="minuten"></canvas> <canvas id="sekunden"></canvas>
    </div>
</div>
<br />
<br />
<br />
<script>
<!--
// variables
var countdown = document.getElementById('countdown');
var endDate = countdown.dataset.date || '2019-08-11';
var endTime = countdown.dataset.time || '00:00:00';
var endCountdown = new Date(endDate + 'T' + endTime);
var timer;
var specs = {
  'radius': 50,
  'centerX': 50,
  'centerY': 50,
  'thickness': 10,
  'offset': -Math.PI/2,
  'color': '#337ab7',
  'bgColor': '#ccc',
  'idFont': 'small-caps 400 10px Verdana',
  'valueFont': 'bold 30px Verdana',
  'fontColor': '#000'
};
var time = {
  'millisecond': 1000,
  'sekunde': 60,
  'minute': 60,
  'stunde': 24,
  'tag': 7
}
var info = {};


// canvas init
var canvasElements = Array.prototype.slice.call(document.querySelectorAll('canvas'));
var canvasCtx = [];
canvasElements.forEach( function(canvas, index) {
  canvas.width = specs.centerX * 2;
  canvas.height = specs.centerY * 2;
  canvasCtx[index] = canvas.getContext('2d');
  var name = canvas.id;
  info[name] = {'ctx': index, 'value': 0, 'prevValue': -1};
});
var canvasKeys = Object.keys(info);
info.tage.denominator = time.tag;
info.stunden.denominator = time.stunde;
info.minuten.denominator = time.minute;
info.sekunden.denominator = time.sekunde;

// show remaining time
function showRemainingTime() {
  var now = new Date();
 
  // calculate new values
  var sekundenLeft = Math.max(0, Math.floor((endCountdown - now)/1000));
  info.tage.value = Math.floor(sekundenLeft / (time.sekunde*time.minute*time.stunde));
  info.stunden.value = Math.floor((sekundenLeft % (time.sekunde*time.minute*time.stunde)) / (time.sekunde*time.minute));
  info.minuten.value = Math.floor((sekundenLeft % (time.sekunde*time.minute)) / time.sekunde);
  info.sekunden.value = Math.floor(sekundenLeft % time.sekunde);
 
  // update changed values only
  canvasKeys.forEach( function(key) {
    if(info[key].value !== info[key].prevValue){
      if(key === 'tage' && info[key].value > 365) {
        // exception if days is more than 1 year
        draw(canvasCtx[info[key].ctx], 1, key, info[key].value);
      } else {
        draw(canvasCtx[info[key].ctx], info[key].value/info[key].denominator, key, info[key].value);
      }
      info[key].prevValue = info[key].value;
    }
  });
}

// draw function
function draw(ctx, part, id, value) {
  // calculate angles
  var start = specs.offset;
  var between = 2 * Math.PI * part + specs.offset;
  var end = 2 * Math.PI + specs.offset;
 
  // clear canvas
  ctx.clearRect(0, 0, specs.centerX * 2, specs.centerY * 2);
 
  // draw remaining %
  ctx.fillStyle = specs.color;
  ctx.beginPath();
  ctx.arc(specs.centerX, specs.centerY, specs.radius, start, between);
  ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, between, start, true);
  ctx.closePath();
  ctx.fill();

  // draw bg
  ctx.fillStyle = specs.bgColor;
  ctx.beginPath();
  ctx.arc(specs.centerX, specs.centerY, specs.radius, between, end);
  ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, end, between, true);
  ctx.closePath();
  ctx.fill();
 
  // draw text
  ctx.fillStyle = specs.fontColor;
  ctx.font = specs.idFont;
  ctx.fillText(id, specs.radius - ctx.measureText(id).width/2, specs.thickness*3);
  ctx.font = specs.valueFont;
  ctx.fillText(value, specs.radius - ctx.measureText(value).width/2, specs.radius*2 - specs.thickness*3);
}

// change countdown every second
timer = setInterval(showRemainingTime, 1000);
-->
</script>

Und hier der CSS code:

Code:

#countdown p {
  text-align: center;
  margin-bottom: 30px;
  font-size: 2rem;
}
#countdown .canvas-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 440px;
  margin: 0 auto;
}

@media (max-width:500px){
  #countdown .canvas-container { max-width: 220px; }
  #countdown canvas:nth-child(-n+2) { margin-bottom: 10px; }
}

 

https://www.supp-cops.com

 

wenn ich das einsetzte im eigenen css das zerschiesst er mir alles

 

und wie sollte das ausschauen? haha

und wie kann ich sowas erstellen wie im Bild 2? mit 20% und Artikel button

 

Wie kriege ich den Button nach oben und nach links genau so wie die preise?
Und ich würde gern den button auch verlinken

 

hat hier sonst keiner einen tipp

 

Okay habe jetzt alles eingefügt nur die Positionierung gefällt mir nicht mit den Preisen und Button und wenn ich auf mobil geh schaut es dann auch komplett anders aus bin am verzweifeln

 

Okay danke dir dann weis ich zumindest schon mal Bescheid