Needed help on my footer

why mu footer is not sticking with bottom?
*{ padding: 0px;
margin: 0px;
font-family: sans-serif ;
}
body{background: #f0f0f0;}
.wraper{background-image: url(b1.png);
height: 450px;
color: white;}
header{
padding: 20px 0px;
width: 1250px;
display: flex;
justify-content: space-between;
text-align: center;
margin:0 auto;
align-items: center;
}

        .navi a{text-decoration: none;
                color:white;
                letter-spacing: -1px;
                font-size: 25px;
                font-weight: 500; 
                text-transform:uppercase;
                margin-left: 10px;}
        
        .note{text-align: center;
                width: auto;
                margin-top: 25px;
                padding: 10px;
                position: relative;
                right: 10px;
                }
        .note h1{font-size: 60px;
                margin-bottom: 30px;
                letter-spacing: 1px;}
    
        .note h2{ 
                    font-size: 33px;
                    font-weight: 200;
                    line-height: 45px;}
                    
        .main-wraper{width: 1300px;
                     height: 500px;
                     margin: 0 auto;
                     }
        
        .hdrs{      display: flex;}
        
        .hdrs h2{    font-size: 2.1rem;
                     font-weight: 700;
                    letter-spacing: 1px;
        }
        .sec{    display: flex;
                 justify-content: space-between;
                clear: both;}
        
        .card a img{border-radius: 10px;}
                        
        .card1{ background: white;  
                width: 410px;
                border-radius: 20px;
                box-shadow: 0px 0px 1px 1px gray , -0px -0px 0px 1px gray;}
        

        .script{padding: 10px;}
        
        .script h3{padding: 0px 0px;
        font-size: 20px;}
        
        .script p{font-size: 16px;
        letter-spacing: 1px;
        padding: 15px 0px;
        padding-bottom: 20px;}
        
        .link{padding: 15px;}
        
        .link a{text-decoration: none;
                color: black;
                text-transform: uppercase;
                letter-spacing: 1px;
                padding: 8px 15px;
                border: 1px solid #28429f;
                border-radius: 15px;
                font-weight: 600;
                margin-left:10px;
            
        }
        .link a:hover{background:#3b88c3;
                    color: white;}
        
    footer{ background: black; 
            color: white; 
            padding:20px;
            }

and the html is

<!doctype html>

</head>
logo
blog about

Want to learn how to code?

We've got tutorials and resources geared towards
self-taught web developers. Check it out below!

</div>
</div>
<main class="main-wraper">
   <br><br><br><br>
    <div class="hdrs" ><img src="h2pic.png" alt=""><h2 class="">Helpfull resources to get you started!</h2>
       </div><br><br>
       <section class="sec sec1">
        <div class="card"><a href="#"><img src="crd1.png" alt="logo" width="410px;"></a></div>

        <div class="card"><a href="#"><img src="crd2.png" alt="" width="410px"></a></div>

        <div class="card"><a href="#"><img src="crd3.png" alt="" width="410px"></a></div>

        
    </section>
    <br><br><br><br><br>
    <div class="hdrs" ><img src="h2pic2.png" alt=""><h2 class="">Helpfull resources to get you started!</h2>
       </div><br><br>
    
    
        <section class="sec sec1">
        <div class="card1">
            <img src="1.png" alt="" width="410px;">
            <div class="script">
                <h3>4 reason your z-indux isn't working (and how to fix it)</h3>   
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,    
                </p>
                  </div>
    <div class="link"><a href="#">read more</a></div>
            </div>
        <div class="card1">
            <img src="2.png" alt="" width="410px;">
            <div class="script">
                <h3>4 reason your z-indux isn't working (and how to fix it)</h3>   
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,    
                </p>
                  </div>
    <div class="link"><a href="#">read more</a></div>
            </div>
        <div class="card1">
            <img src="3.png" alt="" width="410px;">
            <div class="script">
                <h3>4 reason your z-indux isn't working (and how to fix it)</h3>   
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis dolore facere rem, voluptatibus! Labore ratione dolores error quae aperiam vitae,    
                </p>
                  </div>
    <div class="link"><a href="#">read more</a></div>
            </div>

                
    </section>
        </main>
Our website cookies to make your experience betterby using site you agree to our coolie term and policies learn more here. GOT IT!

I can’t read this crap.

Bro! paste a codepen or something. We are no magicians. If you want help, be reasonable

@idree You would benefit from a plug-in for your editor that formats your code. It will be easier for everyone to read.

haha, me too, OP can you post a codepen link here

Maybe a mod will unscramble this at some point.

I will say nothing “sticks” to anything by default. The footer is part of the normal document flow and will be placed accordingly. Lack of content, or elements taken out of normal document flow, before the footer, may cause it.