Jonathan, se me permite uma dica, escreva seu código como vc o fez e ao abrir no browser (navegador) clique no botão direito e escolha inspecionar, isso aqui no Chrome. Aba Elements. de um lado o HTML do outro informações extras de estilos, eventos escutados e etc.
Edite o codigo html diretamente clicando sobre ele (um clique marca. dois, edita). Ai você faz seus ajustes. copie-os para o bloco de notas ou Notepad++ ou até mesmo para o visual studio core. Porque ao submeter ou refrescar (F5 ou Ctrl+F5 - esse último limpa o buffer) você perde todas as alterações. Você pode editar o CSS também. mas faça o mesmo ao terminar, ou seja, copie a alteração para algum editor.
É mais fácil, pelo menos para mim.
Veja o arquivo q anexei. é um prtscreen desse site.
Você aprende muito olhando a codificação html, DOM, CSS, Javascript dos outros.
Pra mim, que não sou Designer vale a máxima: "nada se cria. tudo se copia e se adapta". Procure Templates HTML Free na Web - Recursivos ou não. Recursividade é a capacidade da página de se adaptar a outros tamanhos de tela. Pra isso tem o Bootstrap.
Use o recurso com sabedoria. Fica a dica.