画面のサイズを変更すると、テキストとボタンが移動する

Question

ブラウザウィンドウのサイズを変更すると、プログレスサークルの中心にあるテキストが実際の位置から離れて移動し、ボタンも通常の位置（中央このような主容器）において

円の中心からずれたテキスト60もボタンもI場合、私は元の位置にそれらを保持することができる方法を、中心にもともと左側に押し込まブラウザのウィンドウサイズを変更します。ここには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）本部円と1グループ

2で一緒に数60）彼らは、静的に滞在するためにはgreybox divの

内の送信ボタンを入れてください一緒にグループ化する必要があります