I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have:
<html>
<head>
<style type="text/css>
body{
background-image: url("images/bg.jpg");
background-color:#844903;
}
.logo{
position: fixed;
top: 40px;
right: 850px;
}
h1{
position: fixed;
top: 250px;
right: 720px;
color: #a86b00;
}
.rf_id{
position: fixed;
top: 50%;
right: 50%;
}
</style>
<title></title>
</head>
<body>
<h1>Welcome, Please scan your student card:</h1>
<div class="logo"><a href="index.html"><img src="images/logo.jpg" alt="logo" </a></div>
<button class="rf_id" type="submit" style="border: 0; background: transparent"><a href="index1.5.html"><img src="images/rf_id.jpg" alt="submit"/></a></button>
</body>
</html>