Olá, gostaria de saber com fazer para que o texto fique visualmente igual em ambas as resoluções!!
A primeria está no meu monitor principal que tem 1920x1080
Já a segunda esta no meu secundário a 1360x768
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Nasa</title>
<link rel="stylesheet" href="miniproje.css">
<link rel="stylesheet" href="reset.css">
<meta name="viewport" content="width=device-width, scale = 1.0">
</head>
<body>
<header>
<div class="cabecalho">
<h1><a href="miniprojetoNasa.html"><img src="nasa-logo.png"></a></h1>
<section class="pesquisa">
<input type="text" id="search" class="barra" required>
<input type="submit" value="🔎" class="search">
</section>
<nav>
<ul>
<li> <a href="historia.html">Nossa historia</a></li>
<li> <a href=miniprojetoNasa.html>Home</a></li>
<li> <a href="jamesWebb.html">James Webb</a></li>
<li> <a href="hubble.html">Hubble</a></li>
</ul>
</nav>
</div>
</header>
<img src="foto1.jpg" class="foto1" alt="Galáxia">
<main>
<section class="about">
<h2> About us</h2>
<p>The National Aeronautics and Space Administration is America’s civil space program and the global leader in space exploration. The agency has a diverse workforce of just under 18,000 civil servants, and works with many more U.S. contractors, academia, and international and commercial partners to explore, discover, and expand knowledge for the benefit of humanity. With an annual budget of $23.2 billion in Fiscal Year 2021, which is less than 0.5% of the overall U.S. federal budget, NASA supports more than 312,000 jobs across the United States, generating more than $64.3 billion in total economic output (Fiscal Year 2019). </p>
<img src="earth.jpg" alt="Earth">
</section>
<section class="ourMission">
<h2>Our missions</h2>
<iframe class="video" width="40%" height="315" src="https://www.youtube.com/embed/_T8cn2J13-4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<ul>
<li>Travel to the moon</li>
<li>James Webb</li>
<li>Artemis program</li>
</ul>
</section>
</main>
<footer>
<img src="nasa-rodapé.jpg">
<p>©Nasa - USA Governement</p>
</footer>
</body>CSS
/*body*/
body {
box-sizing: border-box;
}
/*cabecalho*/
.cabecalho{
position: relative;
background: #0B3D91;
padding: 5px 5px;
}
.pesquisa {
display: inline-block;
}
.barra {
width: 300px;
}
nav {
position: absolute;
top: 90px;
right: 30%;
}
nav li {
display: inline;
margin: 10px;
}
nav a{
text-transform: uppercase;
text-decoration: none;
color: white;
font-weight: bold;
transition: 0.5s all;
}
nav a:hover {
color: red;
text-decoration: underline;
}
/*foto principal*/
.foto1 {
width: 100%;
height: 500px;
transition: 1s all;
margin: 0 0 -5px;
}
.foto1:hover {
opacity: 0.95;
}
/*main*/
main {
background: linear-gradient(#000000, #010841,#2BCFFC);
padding: 5px 5px;
}
.about {
margin: 20px 0 110px;
color: white;
padding: auto 100px;
}
.about h2 {
margin: 2px 0px 200px -665x ;
font-weight: bold;
text-align: center;
font-size: 50px;
clear: right;
}
.about p{
display: inline-block;
font-size: 25px;
width: 30%;
margin: 0%;
margin: 50px 180px 0 50px;
}
.about img{
border-radius: 10px;
width: 45%;
display: inline-block;
margin: 50px 0;
}
.ourMission {
margin: 50px 0 100px 20px;
}
.ourMission h2 {
font-size: 50px;
text-align: center;
margin: 40px 60px 50px 0;
}
.ourMission video{
margin: 0 40px;
float: left;
}
.ourMission ul{
display: inline-block;
margin: 0 20%;
padding: 0 0 50px;
position: absolute;
}
.ourMission li{
margin: 32px 0;
font-size: 30px;
}
/*footer*/
footer {
margin: 100px 0;
background: url("rodapé2.png");
text-align: center;
padding: 50px 0;
color: white;
}