Upper section of a vertical single-page website This is my very first attempt to write HTML and CSS. I designed this website for a friend. I'm not sure if I used the best practices or maybe I did something wrong but I just started my learning process so I would love a review to point bad practices and things I could have done better or I did wrong.

This is meant to be the first section (above the fold) of a vertical single-page website.



* {
  font-family: Open Sans;
  margin: 0px
}

#PageHeader {
  background-color: rgb(236, 100, 62);
  height: 615px;
}
/* logo and nav look aligned on the original file :c */
#logo {
  position: relative;
  margin-left: 40px;
  top: 30px;
}

a.nav:link {
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-transform: uppercase;
  margin-right: 40px;
  float: right;
}

a.nav:hover{
  border-width: 0px 0px 3px 0px;
  border-style: solid;
}

#heading{
  color: white;
  text-align: center;
  line-height: 1.2;
  margin-top: 150px;
}

h1{
  font-size: 60px;
  margin-bottom: 30px;
}
&lt;html lang="pt-br"&gt;
  &lt;head&gt;
    &lt;title&gt;Empreendi na Rede&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="author" content="Luciano Infanti"&gt;

    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800" rel="stylesheet"&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;header id="PageHeader"&gt;
      &lt;div id="logo"&gt;
        &lt;img src="https://s31.postimg.org/4esz43xaj/empreendipngwhite.png" height="35"&gt;
 
      &lt;nav&gt;
        &lt;a class="nav" href="#"&gt;Solucoes&lt;/a&gt;
        &lt;a class="nav" href="#"&gt;Metodologia&lt;/a&gt;
        &lt;a class="nav"  href="#"&gt;Sobre nos&lt;/a&gt;
        &lt;a class="nav"  href="#"&gt;Depoimentos&lt;/a&gt;
        &lt;a class="nav"  href="#"&gt;Clientes&lt;/a&gt;
        &lt;a class="nav"  href="#"&gt;Contato&lt;/a&gt;
      &lt;/nav&gt;

      &lt;div id="heading"&gt;
        &lt;h1&gt;A consultoria empresarial&lt;br&gt; acaba de ser redefinida&lt;/h1&gt;
        &lt;p id="kicker"&gt;Aliquam et placerat lacus. Donec pharetra nibh a placerat tincidunt.&lt;br&gt;
  Integer viverra nisl dolor, in viverra enim sollicitudin nec.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/body&gt;
&lt;/html&gt;
HTML validation

Always include a doctype declaration.  These days, HTML 5 is recommended, so the document should start with &lt;!DOCTYPE html&gt;.

The &lt;div id="logo"&gt; is unclosed.  That would likely explain your vertical alignment issues.

The &lt;meta charset="utf-8"&gt; declaration should occur as early as possible, preferably immediately after the opening &lt;head&gt; tag, because the charset affects how all text in the document is interpreted.  It would be better not to make the browser re-parse the &lt;title&gt;.

The &lt;img&gt; tag must have an alt attribute.  The omission of the alt attribute is unacceptable here, especially since the image contains text.  It is odd that the logo has a height attribute but no width.

HTML semantics

The &lt;br&gt; inside the &lt;h1&gt; is not appropriate, since it is there for styling.  I would go with a width rule in CSS, using em as the measurement unit so that it scales with the font size.

Writing class="nav" in every navigation link, though harmless, seems excessive.  These elements could be selected in CSS using nav &gt; a instead.

It's unclear which of the &lt;nav&gt; links, if any, takes you back to the "home" page.

CSS

The * selector is excessive.  If you want to set a font for the page, a body rule should suffice.

In #PageHeader, you set a background-color.  It would be a good idea to also set the color at the same time.  A comment saying /* white text on orange */ would be nice.  You should specify color: white on the links too, in such a way that applies even to visited links.

When you float each nav link to the right, the visual order ends up backwards relative to the DOM order.  I would rather float the entire &lt;nav&gt;.  It would be a good idea to specify a margin-left on the nav so that it will not overlap the logo if the page is too narrow.



body {
  font-family: Open Sans;
  margin: 0px
}

#PageHeader {
  background-color: rgb(236, 100, 62);
  color: white;
  height: 615px;
}
/* logo and nav look aligned on the original file :c */
#logo {
  position: relative;
  margin-left: 40px;
  top: 30px;
}

nav {
  float: right;
  margin-left: 200px;
}

nav &gt; a {
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 40px;
  color: white;
}

nav &gt; a:hover {
  border-width: 0px 0px 3px 0px;
  border-style: solid;
}

#heading {
  color: white;
  text-align: center;
  line-height: 1.2;
  margin-top: 150px;
}

#heading h1 {
  font-size: 60px;
  margin-bottom: 30px;
  margin-left: auto;
  margin-right: auto;
  width: 15em;
}
&lt;html lang="pt-br"&gt;
  &lt;head&gt;
    &lt;title&gt;Empreendi na Rede&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="author" content="Luciano Infanti"&gt;

    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800" rel="stylesheet"&gt;
  &lt;/head&gt;

  &lt;body&gt;
    &lt;header id="PageHeader"&gt;
      &lt;div id="logo"&gt;
        &lt;img src="https://s31.postimg.org/4esz43xaj/empreendipngwhite.png" height="35"&gt;
      &lt;/div&gt;
      &lt;nav&gt;
        &lt;a href="#"&gt;Solucoes&lt;/a&gt;
        &lt;a href="#"&gt;Metodologia&lt;/a&gt;
        &lt;a href="#"&gt;Sobre nos&lt;/a&gt;
        &lt;a href="#"&gt;Depoimentos&lt;/a&gt;
        &lt;a href="#"&gt;Clientes&lt;/a&gt;
        &lt;a href="#"&gt;Contato&lt;/a&gt;
      &lt;/nav&gt;

      &lt;div id="heading"&gt;
        &lt;h1&gt;A consultoria empresarial acaba de ser redefinida&lt;/h1&gt;
        &lt;p id="kicker"&gt;Aliquam et placerat lacus. Donec pharetra nibh a placerat tincidunt.&lt;br&gt;
  Integer viverra nisl dolor, in viverra enim sollicitudin nec.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/body&gt;
&lt;/html&gt;