back ground image inside section not displaying

I can't get any pics or links of pics to show. I tried using multiple links and pics. Nothing works. All files in the same folder, and CSS connected. I don't know what to do any more.

HTML

<!doctype html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset= "utf-8">
<title> portfolio website </title>
<link rel="stylesheet" href="stylesheet.css">

</head>

<html>
    <body>
        <section class:"main">
        <div id="container">
                <div class:"header">
                    <nav>
                        <a href="index.html">Home</a>
                        <a href="About.html">About</a>
                        <a href="Portfolio.html">Portfolio</a>
                   </nav>
                </div>
        </div>
        </section>
    </body>
</html>

CSS

    Body{
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;

    }

    .main{
        height: 100%;
        width: 100%;
        margin: auto;
        background-image: url("rockets.jpg");
        background-repeat: none;
        background-size: cover;
    }

Solution

Wrong:

  <section class:"main">
      <div class:"header">
                    <nav>
                        <a href:"index.html">Home</a>
                        <a href:"About.html">About</a>
                        <a href:"Portfolio.html">Portfolio</a>
                   </nav>
       </div>
</section>

Answer:

<section class="main">
    <div class="header">
        <nav>
            <a href="index.html">Home</a>
            <a href="About.html">About</a>
            <a href="Portfolio.html">Portfolio</a>
        </nav>
    </div>
</section>

NOT ":" YOU MUST USE "="