Proszę o pomoc i wyjaśnienie gdzie robię błąd w kodzie. Probuje zrobić stronę responsywna z flexboxem natomiast, przyciski w header sie rozjezdzaja i tło nie jest na caly ekran
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Michał - Porfolio</title>
<meta name="description" content="Porfolio, strona zawiera zakres moich umiejętności">
<link href="https://fonts.googleapis.com/css2?family=Saira&family=Saira+Condensed&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name='keywords' content='webdeveloper, strony internetowe, portfolio, css, HTML'>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<!SEKCJA NAGŁOWEK>
<body>
<header>
<div class="container0">
<div class="box1">
<p>HELLO.</p>
<h1>I Am a</h1>
<h2>Front-End-Developer</h2>
</div>
<div class="box2">
<a href="#1" class="button">Projects</a>
<a href="aboutme.html" class="aboutme">About me</a>
</div>
<div class="box3">
<img src="headerpicture.png" alt="tloheader zdjecie">
</div>
</div>
</header>
<!SEKCJA TECHNOLOGIE>
<div class="container1">
<div class="box1">
<h1>My technology skills</h1>
</div>
<div class="container2">
<div class="box2"><img src="searchengine.png" alt="wyszukiwarka google">
</div>
<div class="box2"><h2>Search engine optimization</h2>
</div>
<div class="box2"><p>Search engine SEO friendly</p>
</div>
</div>
</div>
<div class="container---1">
<div class="box1"><img src="devices.png" alt="mobile devices"></div>
<h2 class="box1">Work looks great on mobile devices</h2>
<p class="box1">Websites are available on mobile devices</p>
</div>
</div>
<!SEKCJA PROJEKTY>
<div class="container2">
<h1>My projects</h1>
<div class="project1">
<img src="Project1.jpg" alt="Project 1 ">
<h2>Portfolio website</h2>
<p>Personal portfolio website, used technologies HTML and CSS</p>
</div>
<div class="project2">
<img src="Project2.jpg" alt="Projekt 2 ">
<h2>Converence room website</h2>
<p>Converence room website, used technologies HTML, CSS</p>
</div>
<div class="project3">
<img src="Project3.jpg" alt="Projekt 3">
<h2>Hotel website</h2>
<p>Wesbite about hotel, with reservations</p>
</div>
<div class="project4">
<img src="Project4.jpg" alt="Projekt 4">
<h2>Restaurant website</h2>
<p>Restaurant webiste with calendar and reservations<p>
</div>
</div>
<! SEKCJA MOTTO >
<div class="container3">
<h1>My motto</h1>
<div class="motto">
<p class="mottotext">
Don't Compare Yourself to Others.<br>
Compare Yourself to the Person You Were Yesterday.
</p>
<p class="authortext">
Johann ML Brown
</p>
</div>
</div>
<!SEKCJA KONTAKT STOPKA>
<div class="container4">
<h2>Get In touch</h2>
<h1>Contact</h1>
<form>
<input type="text" placeholder="Your Name" class="name">
<input type="text" placeholder="E-mail" class="email">
<textarea placeholder="Your message"></textarea>
<button>Send now</button>
</form>
</div>
<div class="container5">
<div class="icon1">
<img src="emailicon.png" alt="emailadress"><span>kontakt@gmail.com</span>
</div>
<div class="icon2">
<img src="facebookicon.png" alt="facebook"><span>Michal Facebook</span>
</div>
<div class="icon3">
<img src="twittericon.png" alt="twitter"><span>Michal Twitter</span>
</div>
<div class="icon4">
<img src="googleicon.png" alt="Google"><span>Michal Google</span>
</div>
</div>
</section>
<footer>
© Michał
</footer>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*STYLE SEKCJA NAGŁOWEK */
/* STYLE HEADER TEKST */
.container0
{
display: flex;
flex-direction: column;
}
.box1
{
flex: 1;
order:1;
}
.box1 p
{
font-size: 100px;
font-weight: bold;
text-transform: uppercase;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
padding-top: 100px;
}
.box1 h1
{
text-transform: uppercase;
margin-top: 10px;
font-size: 24px;
font-weight: normal;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box1 h2
{
text-transform: uppercase;
margin-top: 10px;
font-size: 24px;
font-weight: bold;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box2
{
flex:2;
order:2;
}
.box2 a
{
text-decoration: none;
color: black;
font-family: 'Saira Condensed', sans-serif;
font-weight: 300px;
font-size: 18px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
padding: 0 20px;
line-height: 32px;
margin-left: 250px;
}
/* .box2 .button
{
font-family: 'Saira Condensed', sans-serif;
font-weight: 300px;
text-decoration: none;
padding: 0 20px;
line-height: 32px;
color: black;
font-size: 18px;
border: 2px solid black;
border-radius: 20px;
cursor: pointer;
margin-left: 250px;
} */
.box3
{
margin-left: 200px;
flex:3;
order: 3;
}
/* STYLE HEADER BUTTONY */
header
{
background-color: rgb(255,88,81);
}
.container-0
{
display: flex;
flex-direction: column;
}
div .box2
{
flex-direction: column;
}
/*STYLE SEKCJA TECHNOLOGIE*/
.container1
{
display: flex;
justify-content: flex-end;
}
.container-1 h1
{
font-family: 'Roboto', sans-serif;
font-size: 36px;
text-transform: uppercase;
margin-top: 30px;
}
.container2
{
display: flex;
justify-content: center;
}
.container2 .box2
{
align-items: center;
}
.container2 h2
{
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-transform: uppercase;
}
.container--1 img
{
width: 70%;
}
.container--1 p
{
font-family: 'Saira Condensed', sans-serif;
font-size: 12px;
font-weight: 300px;
}
.container---1
{
display: flex;
flex-direction: row;
}
.box1
{
}
/* .container---1 h2
{
font-family: 'Roboto', sans-serif;
font-size: 16px;
text-transform: uppercase;
}
.container---1 p
{
font-family: 'Saira Condensed', sans-serif;
font-size: 12px;
font-weight: 300px;
} */
/*STYLE PROJEKTY */
.container2 h1
{
font-size: 36px;
text-align: center;
text-transform: uppercase;
}
.container2 h2
{
font-size: 24px;
border-bottom: 4px solid white;
background-color: #f2f1ed;
}
.container2 p
{
background-color: #f2f1ed;
font-size: 18px;
}
.container2 img
{
max-width: 1600px;
width: 100%;
}
.container2
{
display: flex;
flex-direction: column;
}
.project1
{
flex: 1;
order:1;
}
.project2
{
flex:2;
order:2;
}
.project3
{
flex:3;
order:3;
}
.project4
{
flex:4;
order:4;
}
/*STYLE MOTTO*/
.container3 h1
{
font-size: 26px;
font-family: 'Roboto', sans-serif;
text-align: center;
text-transform: uppercase;
margin: 25px;
background-color: #f2f1ed;
}
.container3 .motto
{
text-align: center;
font-size: 18px;
background-image: url("motto.jpeg");
background-size: cover;
background-attachment: fixed;
height: 200px;
padding-top: 100px;
}
.container3 p.authortext
{
font-size: 12px;
text-align: center;
}
.container3
{
display: flex;
flex-direction: column;
}
/* STYLE KONTAKT STOPKA */
.container4 h1
{
font-family: 'Roboto', sans-serif;
font-size: 15px;
text-align: center;
padding-bottom: 20px;
}
.container4 h2
{
font-family: 'Roboto', sans-serif;
font-size: 20px;
text-align: center;
padding-top: 0 20px;
}
.container4 input,button,textarea
{
margin-bottom: 20px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.container4
{
display: flex;
}