WordPress レスポンシブテーマのCSS

質問

http://atsumare.wp.xdomain.jp/
上記のURLでWordPressを使ってレスポンシブデザインの自作テーマを構築中です。
クラス「glay」でくくったボックスがスマホだと本文に食い込んでしまって困っています。
下記のものがスマホ用スタイルシートです。
/****************************************
スマホ用
****************************************/
@media screen and (max-width:640px){
#main-1 {
max-width: 100%;
width: 100%;
}

/* ページヘッダー */
body.home header {
background-size:cover;
background-image:url("http://atsumare.wp.xdomain.jp/wp-content/uploads/2019/09/bg.jpg");
width:100%;
height:200px;
}
header img{
background-size:cover;
display:inline-block;
margin-left:auto;
margin-right:auto;
}
h1 {
position:absolute;
top:0;
left:0;
margin-left:50px;
margin-top:100px;
color:#fff;
font-size:24pt;
}
header img {
background-size:cover;
/* width:640px;
height:200px; */
}
.right-dw {
display:inline-block;
position:relative;
width:100%;
float:left;
}
header nav {
display: none;
}
/* コンテンツエリア */
article {
width:100%;
display:block;
padding-left: 5px;
padding-right: 5px;
box-sizing: border-box;
}
img {
max-width:100%;
height:auto;
margin: 5px 5px 5px 5px;
float:left;
background-size:cover;
}
.right-dw {
clear:both;
display:block;
position:relative;
width:100%;
height:auto;
float:left;
}
.glay {
border:dotted 2px #696969;
display:block;
color:#696969;
padding:2px;
margin:15px 15px 15px 15px;
position:absolute;
}
/* フッターエリア */
footer {
max-width:100%;
width:500px;
display:block;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.footer {
width:130px;
display:inline-block;
text-align:left;
color: #000;
font-size: 10pt;
margin-left:auto;
margin-right:auto;
}
small {
font-size:10pt;
}
}

どなたかご教示ください。

回答No.1

Proof4

CSSを下記のように変更することで食い込まないようになります

.right-dwについて
　display を inline-block -> block に変更
　float を削除

.glayについて
　position を absolute -> relative に変更

新たに下記を追加
.right-dw > a {
display: inline-block;
float: right;
}