我用保加利亚语制作了这个关于Java教程的网站，但我在响应式设计中有一个错误。当我在另一台宽度和高度不同的设备上打开它时，它变得非常糟糕。我试图解决它，我认为主要问题在于边际，但我仍然不知道如何解决它。求求你，帮帮我。
.HTML：
<html>
<head>
<!--Language, title, link, meta-->
<lang="bg"></lang>
<title>Vayloan - Научи Java онлайн</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/index-style.css">
<link rel="shortcut icon" href="css/img/favicon.ico">
<meta name="keywords" content="vayloan, java, tutorials, free">
<meta name="application-name" content="vayloan">
<meta name="msvalidate.01" content="889BFB699C71E48B63966D2F50B87678" />
<meta name="author" content="hristo todorov, yanis yakimov">
<meta name="description" content="Vayloan е безплатна платформа, с помощта на която можеш да се научиш да програмираш на Java">
</head>
<body>
<!--Header with navigation tab-->
<div id="header">
<nav>
<div id="logo">
<a href="index.html"><img src="css/img/logo.png" width="80px" height="80px"></a>
</div>
<ul>
<li><a href="index.html">Начало</a></li>
<li><a href="lessons.html">Уроци</a></li>
<li><a href="exercises.html">Упражнения</a></li>
<li><a href="contact-us.html">Свържете се с нас</a></li>
</ul>
</nav>
</div>
<!--Transperent background with name and slogan-->
<div id="header-desc">
<div id="trans">
<!--Blank space-->
<div id="blank-1">
</div>
<h1>Vayloan</h1>
<h2>Научи Java онлайн</h2>
</div>
</div>
<!--Another blank space-->
<div id="another-bs">
</div>
<!--Main content-->
<div id="content">
<div id="question">
<strong>Какво е Vayloan?</strong>
</div>
<div id="answer">
Vayloan е образователна платформа, която ще Ви помогне да научите Java бързо и лесно.
<br>
<br>
Ето с какво Vayloan се различава от другите образователни платформи:
</div>
<div id="why">
<img src="css/img/check.png" id="check">
<div id="check-text-1">
<strong>Кратки и лесноразбираеми видео уроци на български</strong>
</div>
<br>
<br>
<img src="css/img/check.png" id="check">
<div id="check-text-2">
<strong>Упражнения, с които да затвърдите новите знания</strong>
</div>
<br>
<br>
<img src="css/img/check.png" id="check">
<div id="check-text-3">
<strong>Можете да задавате въпроси и да давате предложения</strong>
</div>
<br>
<br>
<img src="css/img/check.png" id="check">
<div id="check-text-4">
<strong>Видео уроци, както за начинаещи така и за напреднали</strong>
</div>
<br>
</div>
</div>
<!--Footer-->
<div id="footer">
<div id="bs">
</div>
<h6>Copyright © 2018 | Изработен от Христо Тодоров и Янис Якимов | Проект №84 за НОИТ</h6>
<div id="contact">
<a href="https://www.facebook.com/Vayloan-1951527885163461/"><img src="css/img/fb.png"></a>
<a href="https://github.com/Vayloan"><img src="css/img/github.png"></a>
<a href="https://www.youtube.com/channel/UCWt3DkdlMsordyw967G1akg"><img src="css/img/yt.png"></a>
</div>
</div>
</body>
.CSS：
h1 {
text-align: center;
color: white;
font-size: 40pt;
font-family: sans-serif;
}
#header-desc {
background-image: url(img/header-bg.jpg);
height: 760px;
background-attachment: fixed;
background-size: cover;
}
body {
margin: 0 auto;
}
#blank-1 {
height: 280px;
}
h2 {
text-align: center;
font-size: 25pt;
color: white;
font-family: cursive;
}
#trans {
height: 760px;
background-color:rgba(0, 0, 0, 0.40);
}
#header {
height: 80px;
background-color: #011222;
color: rgba(255,255,255,0.75);
position: fixed;
width: 100%;
}
ul li {
list-style: none;
display: inline-block;
float: left;
line-height: 100px;
margin-top: -99px;
margin-left: 80px;
}
ul li a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: arial;
color: #ffffff;
padding: 0px;
}
#footer {
background-color: #011222;
height: 250px;
text-align: center;
color: white;
font-size: 17pt;
}
#bs {
height: 100px;
}
#contact {
float: right;
margin-right: 50px;
}
h3 {
text-align:center;
font-size: 27pt;
}
#bs-2 {
height: 30px;
}
#content {
height:655px;
background-image: url(img/contact-bg.png);
}
#another-bs {
height:100px;
background-image: url(img/contact-bg.png);
}
#logo {
margin-left: 10px;
}
#question {
text-align: center;
font-size: 28pt;
font-family: monospace;
}
#answer {
text-align: center;
margin-top: 30px;
font-size: 20pt;
font-family: cursive;
}
#why {
margin-top: 40px;
margin-left: 20%;
font-size: 22pt;
margin-right: 21.63%;
}
#check-text-1 {
float: right;
margin-right:12.26%;
margin-top: 5px;
}
#check-text-2 {
float: right;
margin-right:17.34%;
margin-top: 5px;
}
#check-text-3 {
float: right;
margin-right:12%;
margin-top: 5px;
}
#check-text-4 {
float: right;
margin-right: 9.5%;
margin-top: 5px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #3ab913;
}
a:active {
text-decoration: none;
}
GITHUB：https://github.com/Vayloan/Vayloan.github.io
至于设计的响应能力，有许多因素会导致问题，例如使用高度/宽度的像素而不是%。如果您希望根据屏幕大小变大或变小某些内容，则应了解媒体查询。
如果你有一个更具体的问题，我可以回答，我很乐意提供帮助，但这不是问非常广泛的问题的地方，比如"我的设计很糟糕，请帮我解决问题"。
始终为响应式网站设置视口元标记，以针对不同的屏幕尺寸进行调整：
<meta name="viewport" content="width=device-width, initial-scale=1">
您可以在此处阅读它的工作原理以及为什么它很重要。
此外，这不是有效的标记：
<lang="bg"></lang>
将语言属性放在 html 标记中，如下所示：
<html lang="bg">