目前，我的网站看起来不太好。所以这是我的问题:
我已经创建了一些基本和简单的代码，(注意:这段代码使用了边距。我不确定这是否是一个问题)但是它根据屏幕尺寸对齐，看起来不太好。尝试通过浏览器运行此代码以了解我的意思:
HTML
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" integrity="sha384-
wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<meta charset="UTF-8">
<title>Portal</title>
</head>
<body>
<nav>
<ul>
<h3 style="margin:15px;" class="logo">ONECLICKLEARN</h3>
<li><a class="navlink" href="#">Home</a></li>
<li><a class="navlink" href="#">About</a></li>
<li><a class="navlink" href="#">Templates</a></li>
<li><a class="navlink" href="/css-library">CSS Library</a></li>
<li><a class="navlink" href="#">Updates</a></li>
<li><a class="navlink" href="#">Downloads</a></li>
</ul>
</nav>
<div class="content-left">
<h1>Ocelot <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">Okay, let's get things straight: you're going
to get tired of clicking every single download button if you want
<em>all</em>
our libraries. So we came up with a little something that just might
brighten
your day a little. We call it <em>Ocelot</em>. Ocelot is our main library
that
rolls ever single library we have rolled into one. So clear your storage
space,
and get ready for <em>ocelot!</em> - Current version: 1.0.</h3>
<hr>
</div>
<div class="details">
<h1>GET OCELOT</h1>
<button class="button-greentheme">MORE INFO</button> <button
class="button-graytheme">SAFE LINK IT!</button>
</div>
<div class="content-left">
<h1>Bibrary <strong class="tag-greentheme">1.0</strong></h1>
<h3 class="margin-para">A new CSS library has <em>just</em> come out!
It's the first CSS library to be done by this website. The name is Bibrary.
This handy library covers all the buttons you could want, but remember - not
all buttons are covered, but be sure to watch this one. It could be updated
as much as 5 times a year!</h3>
</div>
<div class="details">
<h1>GET BIBRARY</h1>
<button class="button-greentheme">MORE INFO</button> <button
href="/bibrary" class="button-graytheme">SAFE LINK IT!</button>
</div>
</body>
</html>
我有一个 margin-left:30px;以及右边的 30px； 如果您不满意，请给出理由
最佳答案
您可以使用 Bootstrap 框架。它们是最流行和使用最多的响应式框架，您可以查看 getbootstrap.com。 youtube 上有很多关于 Bootstrap 的优秀教程。
如果你想要无框架的方式，你可以使用 @media 和纯 CSS。您可以使用谷歌阅读大量文档。
关于HTML - 如何让我的网站完美地显示在不同的屏幕尺寸上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44244484/