Vi un tutorial sobre como añadir un menu desplegable (no tenia ni idea como), lo añadi, y funciona bien solo que arruina todo lo demas, hace que el fondo y todo lo demas se centre y no llena toda la pantalla:
/* Fonts */
@font-face {
font-family: "Point Free";
src: url("fonts/pointfree.ttf");
}
@font-face {
font-family: "Simple Type";
src: url("fonts/Simpletype.ttf");
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.header{
width: 100%;
height: 65px;
background: #fff;
position: fixed;
}
.container{
max-width: 1100px;
margin: auto;
}
.logo{
float: left;
line-height: 65px;
}
.menu{
float: right;
line-height: 65px;
}
.menu ul{
display: flex;
list-style: none;
}
.menu a{
display: block;
padding: 0px 20px;
text-decoration: none;
color: #000000;
transition: all 500ms ease;
}
.menu a:hover{
background: #ec529f;
color: #fff;
}
.menu .submenu{
background: #fff;
box-shadow: 3px 10px 10px rgba(0,0,0,0.2);
display: none;
}
.menu .submenu li a{
line-height: 50px;
}
.menu ul li a:hover + ul, .menu .submenu:hover{
display: block;
}
#firstPartOfBody {
background: url("fondo-minimalista2.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
#secondPartOfBody {
background: url("fondo-minimalista-parte-2.jpg");
background-size: 100%;
background-repeat: repeat;
}
#title {
font-family: "Simple Type";
font-size: 100px;
text-align: center;
cursor: default;
}
#title2 {
font-family: "Point Free";
font-size: 70px;
padding: 30px;
color: #ff4da6;
cursor: default;
}
#subtitle {
font-family: "Point Free";
text-align: center;
font-size: 35px;
cursor: default;
}
#firstParagraph {
font-family: "Point Free";
font-size: 25px;
text-align: center;
cursor: default;
}
#firstParagraph:hover {
transform: scale(0.9);
}
#separator {
font-family: "Point Free";
font-size: 30px;
text-align: center;
cursor: default;
}
body::-webkit-scrollbar {
width: 8px;
background: rgb(49, 49, 49);
}
body::-webkit-scrollbar-thumb {
background: #ec529f;
border-radius: 5px;
}
#aplicationTitle {
font-family: "Arial";
font-size: 65px;
margin-left: 100px;
cursor: default;
}
#description {
font-family: "Arial";
font-size: 30px;
margin-left: 180px;
cursor: default;
}
.useButton {
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 35px;
color: #fff;
margin-left: 650px;
border-radius: 10px;
border: solid #ec529f;
background-color: #000;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>EasyHub</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">
<h1 style='font-family: "Simple Type";'>EasyHub</h1>
</div>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Aplicaciones</a></li>
<li><a href="#">¿Por que EasyHub?</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div id="firstPartOfBody">
<br><br>
<h1 id="title">EasyHub</h1>
<br>
<h3 id="subtitle">Tu hub de herramientas faciles</h3>
<!-- <audio src="bgmusic.mp3" loop="1000000" autoplay="true" volume=20></audio> -->
<!-- QUITAR EL COMENTARIO DEL AUDIO LUEGO -->
<br><br><br><br><br>
<p id="firstParagraph">
EasyHub es un hogar de herramientas simples y <br>
faciles de usar en el momento, cuenta con mas de<br>
5 herramientas y que cada vez se suman mas y mas<br>
</p>
<p id="separator"><s>ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ</s></p>
<p id="firstParagraph">
Disfruta de herramientas sin costo, gratuitas<br>
y utiles para tu dia a dia ¡Estamos las 24 horas<br>
listos para ayudar!
</p>
<br>
</div>
<div id="secondPartOfBody">
<br><br><br>
<h3 id="title2"><s>ㅤ</s> Aplicaciones <s>ㅤㅤㅤㅤㅤㅤㅤㅤ</s></h3>
<br><br>
<h1 id="aplicationTitle" style="color: #ec529f;">● FreeWrite</h1>
<br>
<p id="description">
Una amplia y gran herramienta libre<br>
para escribir todo lo que quieras,<br>
la Caja de Arena de la Escritura.
</p>
<input class="useButton" id="freeWriteButton" type="button" value="USAR AHORA">
<br><br><br><br><br>
<h1 id="aplicationTitle" style="color: #ec529f;">● Calculadora</h1>
<br>
<p id="description">
Una simple y basica calculadora facil<br>
de usar y confunciones utiles para usar<br>
en tu dia a dia
</p>
<input class="useButton" id="calculatorButton" type="button" value="USAR AHORA">
<br><br><br><br><br><br>
<h1 id="aplicationTitle" style="color: #ec529f;">● Cara o Cruz</h1>
<br>
<p id="description">
El clasico juego de cara o cruz,<br>
solo hay 2 posibilidades, ¡deja que<br>
la suerte elija todo por ti!
</p>
<input class="useButton" id="faceOrCrossButton" type="button" value="USAR AHORA">
<br><br><br><br><br>
<h1 id="aplicationTitle" style="color: #ec529f;">● Color Picker</h1>
<br>
<p id="description">
Encuentra el color que necesitas para<br>
tu proximo proyecto facil y rapido
</p>
<input class="useButton" id="colorPickerButton" type="button" value="USAR AHORA">
<br><br><br><br><br>
<h1 id="aplicationTitle" style="color: #ec529f;">● Mora (Asistente Virtual)</h1>
<br>
<p id="description">
Tu compañera web, existe y siempre<br>
esta lista para ayudar o entretener
</p>
<input class="useButton" id="virtualAssistentButton" type="button" value="USAR AHORA">
<br><br><br><br><br>
</div>
</div>
</body>
</html>
Y asi es como se ve (pongo la imagen porque no puedo incluir la imagen del fondo ni las fuentes)
Y no tiene que verse asi, tiene que el fondo cubrir toda la pantalla y que los textos se acomoden a la pantalla
Disculpen si no se dar muchos detalles, es que no se como solucionarlo y no se me ocurre como
Espero y me ayuden :D
Saludos.
container
de tu CSS:max-width: 1100px;
Y si aun no te concence haz lo mismo con la siguiente que ponemargin: auto;
y ya nos diras si con eso se arregla