当我更改浏览器窗口大小时，位于进度圈中心的文本偏离其实际位置，按钮也改变其正常位置（位于主容器的中心），如下所示：
从圆心移位的文本 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>`