My first project - Could you help me?

Question

problems:

can't center the ul and li whole site has strange margins on all sides can't set backgorund img for header

<!DOCTYPE html>
<meta charset="UTF-8">
<head>
    <title>empresARQ | Arquitetura para negócios</title>
    <link rel="stylesheet" type="text/css" href="../empresarq/css/main.css">
    <link href='http://fonts.googleapis.com/css?family=Exo:200,300,400,500,600,700,800,600italic,500italic,400italic,700italic,300italic,200italic' rel='stylesheet' type='text/css'>
 </head>
<header class="header">
        <img class="logo" src="../empresarq/img/logo-empresarq.png">
    <div class="nav">
        <a href=""><li>Contato</li></a>
        <a href=""><li>Projetos</li></a>
        <a href=""><li>Sobre</li></a>
        <a href=""><li>+ARQ</li></ul></a>
    <br><h1>Arquitetura também é planejamento.</h1>
    </div>
</header>
<body>
    <section class="maisarq"><h1>+ARQ</h1>
        <a href=""><li>PLANEJ+ARQ</li></a>
        <a href=""><li>CULT+ARQ</li></a>
        <a href=""><li>SUSTENT+ARQ</li></a>
        <a href=""><li>ACESS+ARQ</li></ul></a>
    </div></section>
    <section><div class="projetos"><h1>Alguns de nossos principais projetos</h1>
        <ul>
            <li>Pizzaria Macedo</li>
            <li>Livraria Papiro </li>
            <li>Parque linear das corujas</li>
            <li>Equipotel 2011</li>
        </ul>
        </div></section><section>
    <section><div class="sobre"></div><section>
    <section><div class="contato"><h2>Vamos tomar um café?</h2><p>+55 11 9 8128 1258<br>Rua Cristiano Viana, 855 - Casa 35<br>contato@empres.arq.br</p></div><section>
</body>



```css 

/* --- UNIVERSAL --- */

* {
    box-sizing: border-box:
}

/* --- GENERAL --- */

body {
    font-family: 'Exo', sans-serif;
    background: white;
    margin; -50px auto 0;
}

a {
    font-weight: bold;
    text-decoration: none;
    color: #003D3D;
}

ul {
    list-style: none;
    padding; 5em;
    text-align: center;
}


@import url(http://fonts.googleapis.com/css?family=Exo:200,300,400,500,600,700,800,600italic,500italic,400italic,700italic,300italic,200italic);

.header h1 {
    font-family: 'Exo', sans-serif;
    color: white;
    font-size: 2em;
}

.logo {
    float: left;
    display: inline-block;
    max-height: 50%;
    max-width: 50%;
}

.header {
    max-height: 100%;
    max-height:100%;
    background-color: #CCE7E0;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    background-image: url ('img/header-bg.jpg');
}

.nav li {
    text-decoration: none;
    float: right;
    font-family: 'Exo', sans-serif;
    display: block;
    text-transform: uppercase;
    margin: .5em .2em .5em .2em;
    border: 2px solid #197575;
    color: white;
    padding: .5em;
    background-color: #197575;
}

.header h1 {
    text-align: center;
    padding-top: 5em;
    padding-bottom: 5em;
}


.nav li:hover {
    background-color: #4D9494;
    border: 2px solid #fff;
    border-color: #4D9494;
    color: white;
}

.maisarq {
    margin-top: 2em;
    min-width: 100%;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.maisarq ul {
    align-content: center;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Exo', sans-serif;
}

.maisarq li {
    max-height: 25%;
    max-width: 100%;
    text-decoration: none;
    list-style: none;
    padding: 10px 10px 10px 5px;
    margin-bottom: .5em;
    margin-top: .5em;
    margin-left: .5em;
    color: #fff;
    background-color: #006666; 
    display: inline-block;
    padding: 3em;
    font-family: 'Exo', sans-serif;
}

.maisarq li:hover {
    background-color: #197575;
}

.maisarq {
    display: inline-block;
    max-width: 75%;
    margin-left: .5em;
    margin-right: .5em;
    text-decoration: none;
    font-family: sans-serif;
    border-top: 1px solid #003D3D;
}
.projetos li {    
    max-width: 25%;
    max-height: 25%;
    text-decoration: none;
    list-style: none;
    border: 3px solid #4D9494;
    padding: 10px 10px 10px 5px;
    margin-bottom: .5em;
    margin-top: .5em;
    color: #fff;
    background-color: #4D9494;
    text-decoration: none;
    border-radius: .5em;
    align-content: center;
    text-align: center;
    font-family: 'Exo', sans-serif;
}

.projetos {
    font-family: sans-serif;
    color: white;
    display: inline;
    border-top: 1px solid #003D3D;
}

 .projetos h2 {
    font-size: 2em;
    font-weight: 700;
}

.projetos li {
    display: inline;
    text-align: center;
    margin: 0.2em;
}

.projetos h1 {
    text-align: center;
    font-family: 'Exo', sans-serif;
    font-size: 2em;
    text-transform: uppercase;
    font-weight: 500;
    color: #003D3D;
    border-top: 1px solid #003D3D;
    padding-top: 1em;
}

.contato {
    border-top: 0.2em solid #B2D1D1;
    min-width: 100%;
    max-width: 100%;
    background-color: #003D3D;
    color: white;
    font-family: 'Exo', sans-serif;
    text-align: center;
    padding: 5em 0 5em 0;
    margin-top: 10em;
    line-height: 1.5
}
.contato h2 { 
    text-align: center;
    margin-left: auto;
    text-transform: uppercase;
    font-size: 2em;
}

.contato p {
    font-size: 1em;
    max-width: 100%;
    display: inline-block;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 2em 1em 2em;
    border-radius: 1em;
    text-align: center;
    text-shadow: 1em;
    font-family: 'Exo', sans-serif;

}

.contato h2:hover {
    color:ghostwhite;
}

.contato p:hover {
    color:ghostwhite;

}```

Answer 1 · 2015-04-12T23:41:15Z

April 12, 2015 11:41pm

The strange margins are prob cos you need to reset your browser default styles. You can do that with the * selector.

Some of your unordered lists don't have opening tags, just closing ones. Maybe that's the problem with them.

EDIT When you say centre the ul li, do you mean center the text or the thing as a whole (text is already centered?)? You have Nav li to float right.

Answer 2 · 2015-04-13T00:30:34Z

April 13, 2015 12:30am

To add to what John said, also make sure you are ALWAYS closing your declarations with a semi-colon. For example, your universal statement with border-box ends with a colon. Tisk tisk! That'll mess with your code. Go through and make sure there are no others.

Answer 3 · 2015-04-13T02:17:12Z

April 13, 2015 2:17am

All right! Thanks!

Answer 4 · 2015-04-13T02:18:49Z

April 13, 2015 2:18am

it looks like this now

Answer 5 · 2015-04-13T02:20:46Z

April 13, 2015 2:20am

couldn't figure out yet how to make every section full screen

Answer 6 · 2015-04-13T03:35:13Z

April 13, 2015 3:35am

Hey Andre!

A few things:

<meta charset="UTF-8"> goes inside <head>
Your Image needs an alt attribute
Your first unordered list has no start tag, add one before your first list item.
The end of your first unordered list needs to be outside </a>. So write it: </a></ul>
Same error was made with your second list.
Right after the second list you end a Div. There is no start of one, it seems unnecessary. -You start the body class outside the header, but a header is part of the body.
At the end there are a few mismatched section tags that are jumbled.
On your CSS, on line 14, after "margin" there was a colon as opposed to a semicolon.

See if that helps, here is the Corrected HTML I made:

<!DOCTYPE html> <html>

<head> <title>empresARQ | Arquitetura para negócios</title>

</head> <body> <header class="header"> <img class="logo" src="../empresarq/img/logo-empresarq.png" alt="logo"> <div class="nav"> <ul> <li><a href="">Contato</a></li> <li><a href="">Projetos</a></li> <li><a href="">Sobre</a></li> <li><a href="">+ARQ</a></li> </ul> <br><h1>Arquitetura também é planejamento.</h1> </div> </header>

<section class="maisarq"><h1>+ARQ</h1>
  <ul>
    <li><a href="">PLANEJ+ARQ</a></li>
    <li><a href="">CULT+ARQ</a></li>
    <li><a href="">SUSTENT+ARQ</a></li>
    <li><a href="">ACESS+ARQ</a></li>
    </ul>
</section>

<section><div class="projetos"><h1>Alguns de nossos principais projetos</h1>
    <ul>
        <li>Pizzaria Macedo</li>
        <li>Livraria Papiro </li>
        <li>Parque linear das corujas</li>
        <li>Equipotel 2011</li>
    </ul>
    </div></section>
<section><div class="sobre"></div></section>
<section><div class="contato"><h2>Vamos tomar um café?</h2><p>+55 11 9 8128 1258<br>Rua Cristiano Viana, 855 - Casa 35<br>contato@empres.arq.br</p></div></section>

</body> </html>

Everything seems to look fine with the corrections, though I'm not sure if you meant to have "+ARQ" off to the side like that, but the uls are all centered now.

A simple tool to help you could be this:

https://html5.validator.nu/

Just copy and paste your code into it and you'll spot a lot of errors.

Answer 7 · 2015-04-13T05:22:47Z

April 13, 2015 5:22am

well cameron, i can't be more grateful! john and ariel too!

thanks a lot

these hints helped me to feel more safe on dropping my old wordpress and go by myself on this project

best :ˆ)

Answer 8 · 2015-04-13T15:17:24Z

April 13, 2015 3:17pm

tnxs! :)

Welcome to the Treehouse Community

Looking to learn something new?

André Felipe

André Felipe

My first project - Could you help me?

8 Answers

John Fisher

John Fisher

Ariel Aronica

Ariel Aronica

Ariel Aronica

Ariel Aronica

André Felipe

André Felipe

André Felipe

André Felipe

André Felipe

André Felipe

cameroneckelberry2

cameroneckelberry2

André Felipe

André Felipe

cameroneckelberry2

cameroneckelberry2

André Felipe

André Felipe