以下是问题的代码。我希望页面右侧中心的链接保持在页面的右侧中心,无论屏幕在查看它的人的任何设备上有多大。
.purplebox {
background-color: #515151;
position: fixed;
top: 0px;
right: 0;
width: 100%;
height: 50px;
border: 3px solid #515151;
float: center-right;
font-family: 'Oswald', sans-serif;
}
.greenbox {
top: -100px;
width: 100%;
height: 500px;
z-index: 2;
text-align: center;
margin: 150px 100px 30px 10px;
float: center;
font-family: 'Oswald', sans-serif;
}
.blog {
top: -9px;
position: absolute;
right: 340px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.contact {
top: -9px;
position: absolute;
right: 590px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.mybutton {
top: -9px;
position: absolute;
right: 600px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.buttons {
position: absolute;
top: -9px;
right: 430px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.bottom {
background-color: #6d6d6d;
position: absolute;
width: 100%;
height: 80px;
right: 0;
top: 883px;
}
.legal {
top: -3px;
position: absolute;
right: -220px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.home {
top: -3px;
position: absolute;
right: -70px;
width: 200px;
height: 0px;
border: 3px solid #ffffff;
}
.picture {
float: center-left;
position: fixed;
top: -25px;
left: 50px;
font-family: 'Secular One', sans-serif;
color: #353535;
font-size: 100%;
}
a:link {
position: absolute;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
.large {
font-size: 300%;
}
h1 {
font-size: 250%;
}

<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Secular+One" rel="stylesheet">
<body link="#515151" vlink="#515151" alink="#515151">
<div class="purplebox">
<div class="buttons">
<p><b><a href="creations.html" target="_self">Creations</a></b>
</p>
<center>
</div>
<div class="mybutton">
<body link="#515151" vlink="#515151" alink="#515151">
<center>
<p><b><a href="about.html" target="_self">About</a></b>
</p>
<center>
</div>
<div class="picture">
<h1>A</h1>
</div>
<div class="blog">
<body link="#515151" vlink="#515151" alink="#515151">
<p><b><a href="http://andrewdevs.tumblr.com/" target="self">Blog</a></b>
</p>
<center>
</div>
<div class="contact">
<body link="#515151" vlink="#515151" alink="#515151">
<p><b><a href="contact.html" target="_self">Contact</a></b>
</p>
<center>
<div class="legal">
<body link="#515151" vlink="#515151" alink="#515151">
<p><b><a href="legal.html" target="_self">Legal</a></b>
</p>
<center>
</body>
&#13;