Denunciar

¿Cual es el error en este codigo CSS?

Haz una pregunta JosJSG 1Publicaciones martes, 5 de diciembre de 2017Fecha de inscripción martes, 5 de diciembre de 2017 Última intervención
Buenas amigos, soy nuevo en esto de la programacion y bastante que me han recomendado HTML para comenzar. He aprendido a traves de videos de YouTube gracias a un canal llamado FalconMasters. El problema viene que despues de terminar el curso de HTML y CSS que tiene en su canal. He decidido ir al curso llamado "Curso de diseño web" en el cual utiliza los lenguajes anteriormente mencionados.

En el capitulo 6 (https://www.youtube.com/watch?v=AWitGIR7PeI&t=506s%29 comienzo a diseñar el header con el CSS despues de terminar la estructura HTML.

Ahora, el problema es que mientras estoy diseñando el header. Este mismo se acomoda acorde a el menú. Imagen: https://ibb.co/nEkmpb

Ahora si cambio el tamaño de las palabras "Inicio, Builds y Contacto" el header se acomodará acorde a estos. Imagen: https://ibb.co/ffp7vG

Aqui el codigo del HTML:
<!DOCTYPE>
<html>
	<head>
		<meta charset="UTF-8"
		<meta name="description" content="PCBuild encuentra la mejor combinacion para conseguir tu PC ideal">
		<meta name="keywords" content="Hardware, Combinaciones, Procesadores, Dudas">
		<link rel="stylesheet" type="text/css" href="css/estilos.css">
		<title>PCBuild - Inicio</title>
	</head>
	<body>
		
		<header>
			<div id="subheader">
				<div id="logotipo"><p><a href="">PCBuild</a></p></div>
				<nav>
					<ul>
						<li><a href="#">Inicio</a></li>
						<li><a href="#">Builds</a></li>
						<li><a href="#">Contacto</a></li>
					</ul>
				</nav>
			</div>
		</header>

		<section id="wrap">

			<section id="main">

				<section id="slideshow"></section>

				<section id="bienvenidos">
					<article>
						<hgroup>
							<h2>Bienvenidos al Sitio Web</h2>
							<p>
								<ul>
									<li>En PCBuild podras aprender aprender diversas combinaciones de piezas de pc</li>

								    <li>Aprende las compatibilidades entre una pieza y otra</li>

								    <li>¿Quieres saber de lo ultimo en componentes? ¡Este es tu sitio!</li>

								    <li>¡Aprende a armar tu propia PC en cuestion de minutos!</li>

								    <li>¿Tienes dudas? ¡Selecciona "Contacto" en el menú de inicio y te ayudamos!</li>

								    <li>Precios veridicos y comprobados</li>

								    <li>PCBuild te ayuda a conseguir tu combinacion ideal.</li>
								</ul>
							</p>
						</hgroup>
					</article>
				</section>

				<section id="contenido">
					<article>
						<hgroup><h2 class="titulo">El hardware y sus funciones</h2></hgroup>
						<p class="fecha">03 de diciembre de 2017</p>
						<img class="thumb" src="imagenes/articulo1.png" alt="articulo 1">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum id leo eget rhoncus. Nunc efficitur orci vitae eros sollicitudin, cursus iaculis ante accumsan. Nullam congue, sapien in feugiat vulputate, nulla augue suscipit orci, nec viverra dolor orci non tortor. Donec vehicula pulvinar erat. Praesent sit amet fringilla sapien. Curabitur maximus tincidunt efficitur. Maecenas tincidunt porta dui a imperdiet. Nam ac urna quis sem porta convallis. Vivamus maximus elit ut leo porta aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum mauris at leo aliquet euismod. Sed a nibh nisi. Nunc accumsan ut mauris id fringilla. Etiam lacinia, urna vel malesuada dapibus, lectus augue rhoncus orci, et efficitur arcu diam et diam. Vivamus et rhoncus justo. Duis nec auctor turpis.</p>
					</article>

					<article>
						<hgroup><h2 class="titulo">El hardware y sus funciones</h2></hgroup>
						<p class="fecha">03 de diciembre de 2017</p>
						<img class="thumb" src="imagenes/articulo2.jpg" alt="articulo 2">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum id leo eget rhoncus. Nunc efficitur orci vitae eros sollicitudin, cursus iaculis ante accumsan. Nullam congue, sapien in feugiat vulputate, nulla augue suscipit orci, nec viverra dolor orci non tortor. Donec vehicula pulvinar erat. Praesent sit amet fringilla sapien. Curabitur maximus tincidunt efficitur. Maecenas tincidunt porta dui a imperdiet. Nam ac urna quis sem porta convallis. Vivamus maximus elit ut leo porta aliquam. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dictum mauris at leo aliquet euismod. Sed a nibh nisi. Nunc accumsan ut mauris id fringilla. Etiam lacinia, urna vel malesuada dapibus, lectus augue rhoncus orci, et efficitur arcu diam et diam. Vivamus et rhoncus justo. Duis nec auctor turpis.</p>
					</article>
				</section>
				
				<aside>
					<section class"widget">
						<h3>Articulos Relacionados</h3>
						<ul>
								    <li><a href="#">Aprende las compatibilidades entre una pieza y otra</li></a>

								    <li><a href="#">¿Quieres saber de lo ultimo en componentes? ¡Este es tu sitio!</li></a>

								    <li><a href="#">¡Aprende a armar tu propia PC en cuestion de minutos!</li></a>

								    <li><a href="#">Precios veridicos y comprobados</li></a>
						</ul>
						<h3>Publicidad</h3>
						<img src="imagenes/publicidad.jpg">
					</section>
				</aside>

			</section>

			<footer>
				<section id="acerca-de">
					<article>
						<hgroup>
							<h3>Acerca de nuestro sitio web</h3>
						</hgroup>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum id leo eget rhoncus. Nunc efficitur orci vitae eros sollicitudin, cursus iaculis ante accumsan. Nullam congue, sapien in feugiat vulputate, nulla augue suscipit orci, nec viverra dolor orci non tortor. Donec vehicula pulvinar erat. Praesent sit amet fringilla sapien. Curabitur maximus tincidunt efficitur.</p>
					</article>
				</section>
			</footer>

			<div id="copyright">PCBUILD POST - DERECHOS RESERVADOS 2017</div>

		</section>

	</body>
</html>


Aqui el codigo CSS que llevo hasta ahora:
@import url('reset.css');

@import url('fuentes.css');

/*--- Estilos Generales ---*/
body {
	background:#2d2d2d;
	font-family:Arial,Helvetica,Sans-serif;
}

a {
	text-decoration:none;
	color:#fff;
}

a:hover {
	text-decoration:underline;
}

#wrap{
	width:960px;
	margin:auto;
	clear:both;
}

/*--- Header ---*/

header {
	width: 100%
	float:left;

	editor/#ffffff+0,b7babd+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #b7babd 100%);
background: -webkit-linear-gradient(top, #ffffff 0%,#b7babd 100%); 
background: linear-gradient(to bottom, #ffffff 0%,#b7babd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#b7babd',GradientType=0 );
}

#subheader {
	width:960px;
	margin:auto;
}

#logotipo {
	float:left;
	width:300px;
	padding:10px 0px;
}

#logotipo a {
	font-family:sourcesans;
	font-size:40px;
	color:020202;
}

#logotipo a:hover {
	text-decoration: none;
}

/*--- Menu ---*/
header #subheader nav ul li {
	display:inline-block;
	font-family:sourcesans;
}

header #subheader nav ul li {
	color:#2d2d2d;
	font-size:50px;
	padding:10px;
	border-radius:2px;
}

Los miembros obtienen más respuestas que los usuarios anónimos.

Ser miembro te permite llevar un seguimiento detallado de tus consultas.

Ser miembro te permite disfrutar de opciones adicionales.

¿Todavía no eres usuario?

¡Inscríbete, es gratis y toma menos de un minuto!