html - 更改屏幕大小时，文本和按钮会移位

Question

当我改变浏览器窗口大小时，位于进度圆圈中心的文本偏离了它的实际位置，按钮也改变了它的正常位置(在主容器的中心)，如下所示:

文本从圆心偏移 60 也将按钮推到原来位于中心的左侧，即使我更改浏览器窗口大小，我如何才能将它们保留在原始位置，这里是 css 我申请了

body{
margin: 0;
padding: 0;
}

.button1 {
float: right;
background-color: red;
width: 50%;
margin-right: 188px !important;
}
.main_container{
width: 80%;
margin: 0 auto;
height: 94%;
}

.card_styling{
background-color: lightgrey;
margin-top: 36px;
padding-top: 119px;
min-height: 63%;
}
.circle{
height: 16%;
float: right;
margin-top: -13%;
}
#time{
float: right;
margin-top: -10%;
margin-right: 5%;
font-weight: bold;
}
.title_styling{
margin-top: -87px;
margin-bottom: 97px; 
}
.content_style{
margin-bottom: 32px;
}

<div class="card-container" class="main_container">

<md-card class="card_styling">
<md-progress-circle class="circle" mode="determinate" 
[value]="rangeObs |   async ">   
</md-progress-circle>
<p id="time">{{percentage}}</p>

<md-card-title class="title_styling">Introduction to computer
</md-card-title>
  <md-card-content>
    <p class="content_style">some text</p>
<div *ngFor="let d of data">
       <md-radio-button>
           {{d.label}}
       </md-radio-button>
</div>

<md-card-actions>
    <button md-button class="button1">Submit</button>
</md-card-actions>

</md-card-content>
</md-card>
</div>`

Answer 1

1.)将圆圈和数字 60 分成一组

2.) 将提交按钮放在灰框 div 中

为了让它们保持静止，你必须将它们组合在一起