Probleme css

Bonjour , j'ai un probleme au niveau de ma page web une fois reduite le contenu se chevauche , j'ai essayé de regler ca en css avec @media screen mais le probleme persiste .
j'espére recevoir des reponses ou des solutions , je vous remercie d'avance !
voici mon code css
@import url('https://fonts.googleapis.com/css?family=Roboto:700');


body{
margin:0;
padding:0;
font-family: sans-serif;
}

nav{
background-color: rgba(255,0,0,0.1);
position: fixed;
top:0;
left:0;
width:100%;
height:100px;
padding:10px 100px;
box-sizing:border-box;
transition: .5s;

}

nav .recherche
{
position:absolute;
border-radius:40px;
border: #2980B9 solid;
width:45px;
height:45px;
right:200px;
outline:none;
margin-top:0;
padding-left:10px;
background:url('image/loup.png') right no-repeat;
transition:width 1s;
-webkit-transition:width 1s;
-moz-transition:width 1s;
-o-transition:width 1s;
-ms-transition:width 1s;

}
nav .recherche:focus
{
width:200px;
}

nav a.active{
float:right;
line-height:40px;
color:#2980B9;
padding:5px 20px;
text-decoration: none;
text-transform:uppercase;
transition:.5s;
font-family: 'Roboto', sans-serif;
font-weight:bold;
}

nav a.active:hover
{
color: grey;
text-shadow: 1 2px 2 rgba(255,255,255,0,6);
background: rgba(0,0,0,1);
border-bottom: 3px solid grey;
transition:text-shadow,color 0,2s;
border-radius:20px;
}


nav ul li a.act
{
color: grey;
text-shadow: 1 2px 2 rgba(255,255,255,0,6);
background: rgba(0,0,0,1);
border-bottom: 3px solid grey;
transition:text-shadow,color 0,2s;
border-radius:20px;
}
nav ul li a.act:hover
{
color: grey;
text-shadow: 1 2px 2 rgba(255,255,255,0,6);
background: rgba(0,0,0,1);
border-bottom: 3px solid grey;
transition:text-shadow,color 0,2s;
border-radius:20px;
}
nav ul li a::before
{
content: '';
position: absolute;
border-left: 3px solid transparent;
border-right:3px solid transparent;
border-top: 5px solid rgba(0,0,0,0,2);
left:50%;
bottom:5px;
}



nav .logo{

float:left;
}

nav .logo img{

height: 80px;
transition: .5s;
}

nav ul {
float:right;
margin:0;
padding:0;
display:flex;
}

nav ul li{
list-style: none;
}

nav ul li a {

line-height:150px;
color:#2980B9;
padding:5px 20px;
text-decoration: none;
text-transform:uppercase;
transition:.5s;
font-family: 'Roboto', sans-serif;
font-weight:bold;
}
nav ul li a:hover
{
color: grey;
text-shadow: 1 2px 2 rgba(255,255,255,0,6);
background: rgba(0,0,0,1);
border-bottom: 3px solid grey;
transition:text-shadow,color 0,2s;
border-radius:20px;
}

section.sec1{
width: 100%;
height: 100vh;
background: rgba(21,67,96,0.2);
background-size: cover;

}

@media screen and(max-width:636px){
nav{
position: fixed;
top:0;
left:0;
width:100%;
height:100px;
padding:10px 100px;
box-sizing:border-box;
transition: .5s;

}

nav .recherche
{
border-radius:40px;
border: #2980B9 solid;
width:20px;
height:20px;
right:200px;
outline:none;
margin-top:0;
padding-left:10px;
background:url('image/loup.png') right no-repeat;
transition:width 1s;
-webkit-transition:width 1s;
-moz-transition:width 1s;
-o-transition:width 1s;
-ms-transition:width 1s;

}




nav .logo{

float:left;
}

nav .logo img{

height: 50px;
width:80px;
transition: .5s;
}

nav ul {
float:right;
margin:0;
padding:0;
display:flex;
}

nav ul li{
list-style: none;
}

nav ul li a {

line-height:40px;

}


}