Tell me what mistakes I made?

@import url('https://fonts.googleapis.com/css?family=Dosis:200|Merriweather+Sans:800i|PT+Sans:400,700|Slabo+27px|Tajawal'); @import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); * { margin: 0; padding: 0; } /*/ Header /*/ header { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; background-color: rgb(255, 255, 255); } .logo { font-family: 'Slabo 27px', serif; font-size: 40pt; color: rgb(77, 77, 77); margin-top: 20px; margin-bottom: 51px; } .topnav ul { font-family: 'Tajawal', sans-serif; font-size: 16pt; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex-direction: row; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; margin-top: 25px; margin-bottom: 55px; } .topnav li { display: block; margin-right: 60px; } .topnav li:last-child { margin-right: 0; } .topnav a { text-decoration: none; color: rgb(77, 77, 77); padding-bottom: 3px; } .topnav a:hover { border-bottom: 1px solid black; } /*/ End Header /*/ /*/ BIlboard page /*/ div.bilboard { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; background-image: url(../img/bg.jpg); background-repeat: no-repeat; -webkit-background-size: 100%; background-size: 100%; height: 652px; } .title { align-self: center; text-align: center; } .title h1 { font-family: 'Dosis', sans-serif; font-size: 50pt; word-spacing: 20px; color: rgb(77, 77, 77); } .title p { font-family: 'PT Sans', sans-serif; font-size: 16pt; word-spacing: 5px; color: rgb(77, 77, 77); margin-top: 33px; } .btn { -ms-align-self: center; align-self: center; text-align: center; font-family: 'Slabo 27px', serif; font-size: 18pt; text-transform: uppercase; margin-top: 43px; } .btn a { text-decoration: none; color: #fff; width: 291px; height: 50px; background-color: rgb(77, 77, 77); border-radius: 50px; padding: 18px 77px; } .btn a:hover { background-color: rgba(77, 77, 77, .5); } /*/ End BIlboard page /*/ /*/ Service page /*/ .service { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-around; max-width: 1200px; height: 425px; margin: 0 auto; padding-bottom: 100px; border-bottom: 1px solid rgb(77, 77, 77); } .s1 { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; max-width: 340px; text-align: center; margin-top: 100px; margin-bottom: 99px; } .service .s1 h3 { font-family: 'Dosis', sans-serif; font-size: 22pt; word-spacing: 8px; margin-top: 40px; text-transform: uppercase; } .service .s1 p { font-family: 'PT Sans', sans-serif; font-size: 14pt; word-spacing: 5px; margin-top: 44px; margin-bottom: 100px; color: rgb(77, 77, 77); } /*/ End Service page /*/ /*/ Video page /*/ .video { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; padding-top: 82px; } .titleplay { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -ms-align-items: center; align-items: center; min-width: 737px; text-align: center; } .titleplay h2 { font-family: 'Slabo 27px', serif; font-size: 30pt; text-transform: uppercase; word-spacing: 8px; } .titleplay p { -ms-align-self: center; align-self: center; font-family: 'PT Sans', sans-serif; font-size: 14pt; word-spacing: 5px; max-width: 495px; margin-top: 27px; margin-bottom: 80px; color: rgb(77, 77, 77); } /*/ End Video page /*/ /*/ Work page /*/ .work { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; -ms-align-items: center; align-items: center; max-width: 1200px; margin: 100px auto 0; } .work h2 { font-family: 'Dosis', sans-serif; font-size: 30pt; word-spacing: 8px; text-transform: uppercase; } .brand { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; justify-content: space-between; -ms-align-items: flex-start; align-items: flex-start; height: 320px; margin: 80px 0 95px; } .brandname { display: block; width: 260px; height: 100%; background-color: rgb(247, 247, 247); margin-right: 50px; text-align: center; cursor: pointer; } .brandname:last-child { margin-right: 0; } .brandtitle { margin-top: 140px; } .brandname h3 { font-family: 'Merriweather Sans', sans-serif; font-size: 25pt; color: rgb(210, 209, 209); padding: 0; } .brandname p.tl { font-size: 10pt; color: rgb(210, 209, 209); margin-top: -15px; } .prj { opacity: 0; text-align: center; font-family: 'Slabo 27px', serif; font-size: 13pt; margin-top: 58px; } .prj a { display: block; text-decoration: none; color: #fff; background-color: rgb(87, 87, 87); max-height: 60px; max-width: 260px; padding: 25px 20px; } .brandname:hover .prj { cursor: pointer; opacity: 1; } /*/ End Work page /*/ /*/ Journal page /*/ div.journal { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; background-color: rgb(245, 245, 245); height: 362px; max-width: 100%; margin-top: 97px; padding-bottom: 90px; } .titlejournal { align-self: center; text-align: center; margin-top: 100px; } .titlejournal h1 { font-family: 'Slabo 27px', serif; font-size: 30pt; word-spacing: 26px; color: rgb(77, 77, 77); text-transform: uppercase; } .titlejournal p { font-family: 'PT Sans', sans-serif; font-size: 14pt; word-spacing: 5px; color: rgb(77, 77, 77); margin-top: 33px; } .sbsk { -ms-align-self: center; align-self: center; text-align: center; font-family: 'Slabo 27px', serif; font-size: 18pt; text-transform: uppercase; margin-top: 55px; } .sbsk a { text-decoration: none; color: black; width: 307px; height: 48px; border: 2px solid black; border-radius: 50px; padding: 15px 40px; transition: .3s; } .sbsk a:hover { color: #fff; background-color: rgba(0, 0, 0, .5); transition: .3s; } /*/ End Journal page /*/ /*/ Social page /*/ .socialdiv { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; -ms-align-items: center; justify-content: space-between; align-items: center; width: 450px; height: 270px; margin: 0 auto; } .social { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; justify-content: center; -ms-align-items: center; align-items: center; } .social a { -ms-align-self: center; align-self: center; text-align: center; width: 36px; height: 36px; background: #fff; border: 1px solid black; border-radius: 0; color: black; padding: 15px; text-decoration: none; transition: .3s; } .google-pluse a:hover { background: #DD4B39; color: #fff; border: 1px solid white; transition: .5s; } .twitter a:hover { background: #00acee; color: #fff; border: 1px solid white; transition: .5s; } .facebook a:hover { background: #3b5998; color: #fff; border: 1px solid white; transition: .5s; } .vk a:hover { background: #5d84ae; color: #fff; border: 1px solid white; transition: .5s; } .google-pluse a:active { opacity: 0.1; } .twitter a:active { opacity: 0.1; } .facebook a:active { opacity: 0.1; } .vk a:active { opacity: 0.1; } /*/ End Social page /*/ /*/ Contact footer /*/ footer { background-color: rgb(59, 59, 59); font-family: 'PT Sans', sans-serif; font-weight: 400; color: #fff; padding: 140px 0 135px 0; } .container { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; max-width: 1200px; margin: 0 auto; } .list { text-align: left; max-width: 274px; } .list ul { list-style: none; } .list h3 { font-style: 18pt; } .list li { font-style: 14pt; color: rgb(235, 235, 235); margin-top: 13px; } .list li:first-child { margin-top: 30px; } .list a { text-decoration: none; color: rgb(235, 235, 235); transition: .3s } .list a:hover:not([class="blank"]) { color: rgba(235, 235, 235, .5); border-bottom: 1px solid rgb(235, 235, 235); transition: .3s; } .list a.blank { text-decoration: underline; transition: .3s; } .list a.blank:hover { color: rgba(235, 235, 235, .5); transition: .3s; } .location a.blank { display: block; margin-top: 17px; } .minimaco p { color: rgb(235, 235, 235); margin-top: 40px; line-height: 1.6; } .minimaco p:last-child { margin-top: 25px; line-height: 0; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>projeckt</title> <link rel="stylesheet" href="style/main.css"> </head> <body> <header> <div class="logo"> Minima </div> <div class="topnav"> <nav> <ul> <li><a href="#serv">Service</a></li> <li><a href="#ost">Our Story</a></li> <li><a href="#wk">Work</a></li> <li><a href="#jl">Journal</a></li> <li><a href="#ct">Contact</a></li> </ul> </nav> </div> </header> <div class="bilboard"> <div class="title"> <h1> Minima Clean &#38; Minimal Template </h1> <p> excepteur sint occaecat cuplidatat non proident </p> </div> <div class="btn"> <a href="#">start here&#8594;</a> </div> </div> <div id="serv" class="service"> <div class="s1"> <img src="img/Shape1.png" alt="1"> <h3>Duis aute irure</h3> <p>Excepteur sint occaecat cupi datat non it proident, sunt in culpa qui officia dese runtorn mollit anim id est laborum.</p> </div> <div class="s1"> <img src="img/Shape2.png" alt="2"> <h3>Duis aute irure</h3> <p>Excepteur sint occaecat cupi datat non it proident, sunt in culpa qui officia dese runtorn mollit anim id est laborum.</p> </div> <div class="s1"> <img src="img/Shape3.png" alt="3"> <h3>Duis aute irure</h3> <p>Excepteur sint occaecat cupi datat non it proident, sunt in culpa qui officia dese runtorn mollit anim id est laborum.</p> </div> </div> <div id="ost" class="video"> <div class="titleplay"> <h2>sunt in culpa qui officia deserunt mollit</h2> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="play"><iframe width="686" height="383" src="https://www.youtube.com/embed/0MO9M_vjlkY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div> </div> <div id="wk" class="work"> <div class="titlework"> <h2>Recent Work</h2> </div> <div class="brand"> <div class="brandname"> <div class="brandtitle"> <h3>BRAND</h3> <p class="tl">tagline here</p> </div> <div class="prj"><a href="#">Brand Project &#8594;</a></div> </div> <div class="brandname"> <div class="brandtitle"> <h3>BRAND</h3> <p class="tl">tagline here</p> </div> <div class="prj"><a href="#">Brand Project &#8594;</a></div> </div> <div class="brandname"> <div class="brandtitle"> <h3>BRAND</h3> <p class="tl">tagline here</p> </div> <div class="prj"><a href="#">Brand Project &#8594;</a></div> </div> <div class="brandname"> <div class="brandtitle"> <h3>BRAND</h3> <p class="tl">tagline here</p> </div> <div class="prj"><a href="#">Brand Project &#8594;</a></div> </div> </div> </div> <div id="jl" class="journal"> <div class="titlejournal"> <h1> join our subscribers. </h1> <p> 10 000 sint occaecat cupidatat non proident sunt in culpa qui officia. </p> </div> <div class="sbsk"> <a href="#">Click here to subscribe</a> </div> </div> <div class="socialdiv"> <div class="social google-pluse"> <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a> </div> <div class="social twitter"> <a id="link" href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a> </div> <div class="social facebook"> <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a> </div> <div class="social vk"> <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a> </div> </div> <footer> <div class="container"> <div class="list location"> <h3>Location</h3> <ul> <li>1401 South Grand Avenue</li> <li>Los Angeles, CA 90015</li> <li><a href="(213)748-2411">(213) 748-2411</a></li> <a class="blank" href="#">see it in the map&#8594;</a> </ul> </div> <div class="list company"> <h3>Company</h3> <ul> <li><a href="#ost">Our story</a></li> <li><a href="#serv">Mission</a></li> <li><a href="#jl">Journal</a></li> <li><a href="#">Careers</a></li> </ul> </div> <div class="list support"> <h3>Support</h3> <ul> <li><a href="#">FAQ</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Policies</a></li> </ul> </div> <div class="list minimaco"> <h3>Minima.</h3> <p>ed do eiusmod tempor incididunt ut labore et dolore magna aliwua.</p> <p>Template made by <a class="blank" href="#">pixelhint.com</a></p> </div> </div> </footer> </body> </html>