Probléme avec media query

graphiweb
Les bases HTML/CSS

Bonjour je participe ou MOOC HTML5 de l'ex-site du zéro, tout fonctionne correctement mais j'ai juste un petit souci avec section Centre d'intérêt.

Version mobile :

Version normal :

code html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Célestion Zozor</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        <!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="ie.css" />
         <![endif]-->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script type="text/javascript" src="PIE.js"></script>
    </head>
    <body>
        <div class="wrap">
            <header>
                <div class="logo">
                    <a href="#" id="logo">Logo</a>
                </div>
                <div class="clear-m"></div>
                <div class="titre">
                    <h1>Célestion Zozor</h1>
                    <h3>Intégrateur, mascoote, globe-trotteur et bourrique</h3>
                </div>
            </header>
            <div class="clear-m"></div>
            <nav>
                <hr class="separateur">
                <ul>
                    <li><a href="#"><img src="images/social/viadeo.png" alt="icone" id="viadeo"/>Mon Viadeo</a></li>
                    <li><a href="#"><img src="images/social/twitter.png" alt="icone" id="twitter"/>Mon Twitter</a></li>
                    <li><a href="#"><img src="images/social/facebook.png" alt="icone" id="facebook"/>Mon Facebook</a></li>
                    <li><a href="#"><img src="images/social/linkedin.png" alt="icone" id="in"/>Mon Linkedin</a></li>
                    <li><a href="#"><img src="images/social/mail.png" alt="icone" id="mail"/>Mon mail</a></li>
                </ul>
            </nav>
            <hr class="separateur">
            <section id="competences">
                <h3><img src="images/titres/competences.png" alt="icones" class="competences"/>Compétences</h3>
                <div class="niveau">
                    <div class="html5">
                        <h4>HTML5</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="css3">
                        <h4>CSS3</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="php">
                        <h4>PHP</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="mysql">
                        <h4>MySQL</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="xml">
                        <h4>XML</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="javascript">
                        <h4>Javascript</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="jquery">
                        <h4>Jquery</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="photoshop">
                        <h4>Photoshop</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
                <div class="niveau">
                    <div class="illustrator">
                        <h4>Illustrator</h4>
                        <div class="level"><span>Level 5</span></div>
                    </div>
                </div>
            </section><hr>
            <section class="experience">
                <h3><img src="images/titres/experiences_pro.png" alt="icones" class="competences"/>Expériences professionnelles</h3>
                <div class="experience">
                    <div class="simpleIT">
                        <img src="images/experiences/simple_it_logo.png" alt="Simple IT" id="simpleIT"/>
                    </div>
                    <div class="corps">
                        <h4>Depuis 2010 <strong>Intégrateur Web </strong>chez Simple IT, Paris</h4>
                        <p>
                            Réalisation d'inferfaces web dans le respect des maquettes fournies par le pôle graphisme.
                            Intégration valides W3C en HTML5 et CSS3 pour la réalisation d'un site de cours en ligne.
                            Mis en place de la stratégie de responsive web design pour un accès lisible sur touts les mobiles et toute les tablettes.
                        </p>
                    </div>
                </div>
                <div class="experience">
                    <div class="mcdo">
                        <img src="images/experiences/macdo_logo.png" alt="Simple IT" id="mcdo"/>
                    </div>
                    <div class="corps">
                        <h4>2009 <strong>Equipier polyvalent</strong>chez Mc Donald s, Avignon</h4>
                        <p>
                            Tenye de la caisse, réalisation des hamburgers, des frites, des potatoes de tout un tas
                            d'autres choses bien grasses.Animations Ronald Mc Donald weekend.
                        </p>
                    </div>
                </div>
                <div class="experience">
                    <div class="mcdo">
                        <img src="images/experiences/tavel_logo.png" alt="Simple IT" id="travel"/>
                    </div>
                    <div class="corps">
                        <h4>2009 <strong>Vendange</strong>chez Travel</h4>
                        <p>
                            Vendanges du premier rosé de France durant le mois de septembre 2008
                        </p>
                    </div>
                </div>
            </section>
            <hr>
            <section class="formation">
                <h3><img src="images/titres/formations.png" alt="icones" class="competences"/>Formations & diplômes</h3>
                    <div class="corps2">
                        <h4>2003-2008 <strong>Diplôme d'ingénieur</strong>à Polytechnique</h4>
                        <p>
                            Spécialisté système d'information. Makor de promo. Réalisation de fin d'étude "OpenClassrooms" : plateforme communautaire d'éducation ouverte à tous.
                        </p>
                    </div>
                    <div class="corps2">
                        <h4>2001-2003 <strong>Baccalauréat scientifique</strong> Lycée Henry IV, Paris</h4>
                        <p>
                            Premier de la casse délégué de classe chaque année!
                        </p>
                    </div>
            </section>
            <hr>
            <div class="clear"></div>
            <section class="centre-interet">
                <h3><img src="images/titres/centre_interet.png" alt="icones" class="competences"/>Centre d'interêt</h3>
                <div class="interet">
                    <div class="voyage">
                        <h4>J'aime les voyages</h4>
                        <p>
                            Chaque année, je pars en Asie,
                            en Afrique ou en Océanie.
                        </p>
                    </div>
                </div>
                <div class="interet">
                    <div class="jeux">
                        <h4>J'aime les voyages</h4>
                        <p>
                            FPS, RPG... je suis un expert reconnu de DoTa
                        </p>
                    </div>
                </div>
                <div class="interet">
                    <div class="photo">
                        <h4>La photographie</h4>
                        <p>
                            Je fais des photos de mes nombreux voyage
                        </p>
                    </div>
                </div>
                <div class="interet">
                    <div class="tir">
                        <h4>Le tir à l'arc</h4>
                        <p>
                            Je pratique depuis tout petit
                            et je ne rate jamais ma cible
                        </p>
                    </div>
                </div>
                <div class="interet">
                    <div class="film">
                        <h4>Les jeux vidéo</h4>
                        <p>
                            Je pratique depuis tout petit
                            et je ne rate jamais ma cible
                        </p>
                    </div>
                </div>
                <div class="interet">
                    <div class="poulet">
                        <h4>Manger du poulet</h4>
                        <p>
                            J'ai fait de cette passion un site
                            www.zozormangerdupoulet.eu
                        </p>
                    </div>
                </div>
            </section>
            <hr>
            <footer>
                <section id="information">
                    <h3><img src="images/titres/contact.png" alt="icones" class="competences"/>Compétences</h3>
                    <div class="contact">
                        <forme method="post" id="form">
                            <label for="nom"><input type="text" name="nom" id="nom" placeholder="Votre nom"/></label>
                            <label for="nom"><input type="text" name="email" id="email" placeholder="Votre email"/></label>
                            <textarea placeholder="Votre message"></textarea><br>
                            <input type="submit" id="submit" name="submit" value="Envoyer" src="images/enveloppe.png" class="submit">
                        </form>
                    </div>
                    <div class="code-postal">
                        <p>28 Boulevard Haussmann<br/>
                                75009 Paris<br/>
                                Tél: 06 06 06 06 06</p>
                        <iframe id="fram" src="https://maps.google.be/maps?f=d&source=s_d&saddr=28+Boulevard+Haussmann+75009+Paris&daddr=&hl=fr&geocode=&aq=&sll=50.805935,4.432983&sspn=1.905772,4.938354&mra=ls&ie=UTF8&ll=48.872808,2.335057&spn=0.006295,0.009571&t=m&output=embed"></iframe><br />
                    </div>
                </section>
            </footer>
        </div>
    </body>
</html>

Code css version normal 

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    border: 0;
    font: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
body{margin-top: 10px;margin-bottom: 10px;background: url(images/background.png) repeat;}
/* Classe spécifique pour enlever les float */
.clear{clear: both;}
/* Début de la page web */
/* Image de zozor */

.wrap{width: 760px;margin: auto;}
.wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;behavior: url(/PIE.htc);background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);}
.wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
/* Titre du cv */
.wrap .titre{position:relative;left:40px;margin-left:40px;}
.wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 85px;color: #002d40;text-shadow: 0px 0px 1px #fff;position: relative;top: 20px;left: 10px;}
.wrap .titre h3{position: absolute;left: 148px;top: 100px;font-family: 'Source Sans Pro', sans-serif;font-size: 23px;color: #03638b;text-shadow: 0px 0px 1px #fff;}
/* Menu navigation */
.wrap nav ul li a #viadeo, #twitter, #facebook, #in, #mail{position: relative;left: -10px;vertical-align: middle;top: -2px;border: none;}
.wrap nav ul li a:hover{color: #00a99d;cursor: pointer;}
.wrap nav{margin-top: 95px;}
.wrap nav ul{list-style: none;margin: 10px 0px 10px -2px;}
.wrap nav ul li{display: inline;margin: 0px 30px 0px 10px;}
.wrap nav ul a{font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 15px;text-shadow: 0px 0px 1px #fff;}
/* Section compétence */
.wrap section h3{font-family: 'Pacifico', cursive;font-size: 30px;margin-left: 5px;text-shadow: 0px 0px 1px #fff;}
.wrap section#competences{margin-left: 0px;}
.wrap section{position:relative;list-style: none;margin: -20px 0px 5px 0px;display: inline-block;}
.wrap section .niveau{display: inline-block;margin: 0px 115px 20px 19px;}
/* Niveau de chaque domaine */
.wrap section#competences .niveau, .competences h4{font-weight: bolder;margin-top: 23px;font-size: 12px;}
.wrap section .niveau .html5{position:relative;width: 32px;height: 32px;background: url(images/competences/html5.png);}
.wrap section .niveau .html5 span{display:block;text-indent: -5000px;}
.wrap section .niveau .html5 h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .html5:hover, .css3, .php, .mysql, .xml{cursor: pointer;} /* En selectionne tout */
.wrap section .niveau .html5 .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 0;}
.wrap section .niveau .css3{position:relative;width: 32px;height: 32px;background: url(images/competences/css3.png);}
.wrap section .niveau .css3 span{display:block;text-indent: -5000px;}
.wrap section .niveau .css3 h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .css3 .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 0;}
.wrap section .niveau .php{position:relative;width: 32px;height: 32px;background: url(images/competences/php.png);}
.wrap section .niveau .php span{display:block;text-indent: -5000px;}
.wrap section .niveau .php h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .php .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 30px;}
.wrap section .niveau .mysql{position:relative;width: 32px;height: 32px;background: url(images/competences/mysql.png);}
.wrap section .niveau .mysql span{display:block;text-indent: -5000px;}
.wrap section .niveau .mysql h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .mysql .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 94px;}
.wrap section .niveau .xml{position:relative;width: 32px;height: 32px;background: url(images/competences/xml.png);}
.wrap section .niveau .xml span{display:block;text-indent: -5000px;}
.wrap section .niveau .xml h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .xml .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 124px;}
.wrap section .niveau .xpath{position:relative;width: 32px;height: 32px;background: url(images/competences/xpath.png);}
.wrap section .niveau .xpath span{display:block;text-indent: -5000px;}
.wrap section .niveau .xpath h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .xpath .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 186px;}
.wrap section .niveau .javascript{position:relative;width: 32px;height: 32px;background: url(images/competences/javascript.png);}
.wrap section .niveau .javascript span{display:block;text-indent: -5000px;}
.wrap section .niveau .javascript h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .javascript .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 202px;}
.wrap section .niveau .jquery{position:relative;width: 32px;height: 32px;background: url(images/competences/javascript.png);}
.wrap section .niveau .jquery span{display:block;text-indent: -5000px;}
.wrap section .niveau .jquery h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .jquery .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 186px;}
.wrap section .niveau .photoshop{position:relative;width: 32px;height: 32px;background: url(images/competences/ps.png);}
.wrap section .niveau .photoshop span{display:block;text-indent: -5000px;}
.wrap section .niveau .photoshop h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .photoshop .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 218px;}
.wrap section .niveau .illustrator{position:relative;width: 32px;height: 32px;background: url(images/competences/illustrator.png);}
.wrap section .niveau .illustrator span{display:block;text-indent: -5000px;}
.wrap section .niveau .illustrator h4{position: absolute;left: 46px;top: -24px;font-size: 14px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .niveau .illustrator .level{position:absolute;left: 43px;top: 19px;width: 83px;height: 16px;background: url(images/competences/niveau.png) 0 264px;}
.wrap section h3{font-family: 'Pacifico', cursive;font-size: 30px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;}
.wrap section .competences{position:relative;top:-3px;left:-8px;vertical-align: middle;}
.wrap section .simpleIT, .mcdo{float: left;}
.wrap section .corps{margin-left: 130px;}
.wrap section .corps h4{color: #2f5360;}
.wrap section .corps p{color: #666663;margin-top: -5px;}
.wrap section .corps strong{font-weight: bolder;color: #002d40;font-family: 'Lato', sans-serif;}
.wrap section .corps2 h4{color: #2f5360;}
.wrap section .corps2 p{color: #666663;margin-top: -5px;}
.wrap section .corps2 strong{font-weight: bolder;color: #002d40;font-family: 'Lato', sans-serif;}
.wrap section.centre-interet{width: 820px;margin-bottom: 0px;margin-left: 125px;}
.wrap section.centre-interet h3{font-family: 'Pacifico', cursive;font-size: 30px;margin-left: -122px;text-shadow: 0px 0px 1px #fff;}
.wrap section.centre-interet .interet{margin: 0px 0px 41px -130px;display: inline-block;}
.wrap section.centre-interet .interet .voyage{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/voyages.png) no-repeat;}
.wrap section.centre-interet .interet .voyage h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section.centre-interet .interet .voyage p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .jeux{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/jeux.png) no-repeat;}
.wrap section.centre-interet .interet .jeux h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;font-family: 'Source Sans Pro', sans-serif;}
.wrap section .interet .jeux p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .photo{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/photographie.png) no-repeat;}
.wrap section .interet .photo h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section .interet .photo p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .tir{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/tir_a_l_arc.png) no-repeat;}
.wrap section.centre-interet .interet .tir h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section.centre-interet .interet .tir p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .tir{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/tir_a_l_arc.png) no-repeat;}
.wrap section.centre-interet .interet .tir h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section.centre-interet .interet .tir p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .film{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/films.png) no-repeat;}
.wrap section.centre-interet .interet .film h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section.centre-interet .interet .film p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section.centre-interet .interet .poulet{position:relative;width: 400px;height: 32px;background: url(images/centre_interet/poulet.png) no-repeat;}
.wrap section.centre-interet .interet .poulet h4{position: absolute;left: 46px;top: -24px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #002d40;font-family: 'Source Sans Pro', sans-serif;}
.wrap section.centre-interet .interet .poulet p{position: absolute;left: 46px;top: 5px;width:200px;font-size: 14px;text-shadow: 0px 0px 1px #fff;color: #666663;}
.wrap section#information .contact{float: left;margin-top: -25px;}
.wrap section#information .contact label{display: block;}
.wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: -42px;}
.wrap section#information .code-postal p{color: #666663;font-family: 'Source Sans Pro', sans-serif;}
.wrap input[type=text]{position:relative;width: 300px;}
.wrap input[type=submit]{width: 100px;}
.wrap input, textarea{border: 1px solid #002d40;border-radius: 3px;background: url(images/background.png);height: 25px;margin-top: 5px;}
.wrap textarea{display: block;width: 296px;height: 100px;}

Code css version mobile 

/* Version mobile */
@media screen and (max-width: 330px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 68px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 45px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 20px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -217px;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 75px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;}
    .clear-m{clear: both;}
}
@media screen and (max-width: 700px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 235px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 45px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 20px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -175px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 75px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section {position:relative;list-style: none;margin: 0px 0px 5px 0px;display: inline-block;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section.centre-interet .interet{float:none;width:200px;margin: 0px 0px 41px -130px;display: inline !important;}
    .clear-m{clear: both;}
}

@media screen and (max-width: 600px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 235px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 45px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 20px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -175px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 75px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section {position:relative;list-style: none;margin: 0px 0px 5px 0px;display: inline-block;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;}
    .clear-m{clear: both;}
}
@media screen and (max-width: 400px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 110px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 45px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 20px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -184px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 75px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;}
    .clear-m{clear: both;}
}
@media screen and (max-width: 300px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 55px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 35px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 20px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -184px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 85px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section#information .code-postal{margin-left: 10px;margin-top: 0px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;}
    .clear-m{clear: both;}
}
@media screen and (max-width: 320px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 70px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 35px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 17px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -184px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 85px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;display: block !important;}
    .clear-m{clear: both;}
}
@media screen and (max-width: 350px){
    .wrap{width: 100%;}
    .wrap .logo{position:relative;float:left;width:155px;height:155px;border-radius: 5px;background: #fff;box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);margin-left: 70px;}
    .wrap .logo #logo{position:absolute;top:5px;left:5px;display:inline-block;width: 145px;height: 145px;background: url(images/photo.png);text-indent: -5000px;text-decoration: none;}
    .wrap .titre{position:relative;margin-left:40px;}
    .wrap .titre h1{font-family: 'Pacifico', cursive;font-size: 35px;color: #002d40;text-shadow: 0px 0px 1px #fff;text-align: center;margin-left: -110px;}
    .wrap .titre h3{font-family: 'Source Sans Pro', sans-serif;font-size: 17px;color: #03638b;text-shadow: 0px 0px 1px #fff;margin-top: -22px;text-align: center;margin-left: -184px;width: 100%;}
    .wrap nav .separateur{display: none;}
    .wrap .separateur{display: none;}
    .wrap nav{border:none;margin-top: 85px;margin-left: 10px;}
    .wrap nav ul li{display: block;margin: 10px 30px 0px 10px;}
    .wrap nav ul li #viadeo, #twitter, #facebook, #in, #mail{display: none;}
    .wrap nav ul a{text-align:center;font-family: 'Source Sans Pro', sans-serif;color: #000;text-decoration: none;vertical-align: middle;font-size: 18px;text-shadow: 0px 0px 1px #fff;}

    .wrap section h3{font-family: 'Pacifico', cursive;font-size: 20px;margin-left: 5px;color: #002d40;text-shadow: 0px 0px 1px #fff;margin-left: 45px;}
    .wrap .competences{display: none;}
    .wrap section .experience #simpleIT, #mcdo, #travel{display: none;}
    .wrap section .experience .corps, .corps2{margin-left: 20px;}
    .wrap section#information .code-postal{float: right;margin-left: 10px;margin-top: 0px;display: block;}
    .wrap section.centre-interet{margin-bottom: 0px;margin-left: 125px;}
    .wrap section .interet{margin: 0px 0px 41px -130px;}
    .clear-m{clear: both;}
}

Voilà merci de votre aide futur :)

5 réponses

graphiweb
Auteur
Réponse acceptée

Bonjour j'ai réglé le souci, j'ai mis un display inline.

coloo

Bongour

Mets un lien si tu veux qu'on t'aide. Il est tout simplement hors de question que je regarde dans ce code (plus que large) sans soutient visuel).

;)

graphiweb
Auteur

C'est un exercice il n'est pas en ligne c'est bien dommage :(

coloo

Déja, tu peux noter un truc. Tu as plusieurs media query

ex :

@media screen and (max-width: 400px)

Donc de 0 à 400px, les propriété qui sont dans ce media seront comptabilisé.

C'est pas plutôt ceci que tu voulais faire : 

@media screen and (min-width: 320px) and (max-width: 400px)

Tu peux garder bien entendu un max-width sans min-width. Pour mettre les propriétés redondantes ;).

lamiinek

je pense que c'est tres bien explique dans ce tuto sur le Responsive Design, bonne chance :)