Responsive Design(media query)-CodePudding

I am a newbie frontend developer working on a book publishing blog project where I am stuck on the responsive part of the header of my landing page. I used a media query with some CSS rules to make my header responsive, but it doesn't work when displayed on a mobile device. I want my menu bar to look right on a mobile device. Could someone please assist me?

enter code here

*{
    margin: 0;
    padding: 0; 
    box-sizing: border-box;
}
html{
    font-size: 20px;
}

/*Navigation bar*/
header {
    background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position:  center;
    display: flex;
    justify-content: space-around;
    width: 100%;
}
.logo img {
    max-width: 100px;
    max-height: 100px;
    margin-top: 30%;
}
.nav_link {
    text-align: center;
    margin-top: 5%;
    margin-bottom: 5%;
}
.nav_link li, a{
    display: inline-block;  
    padding: 7px 13px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
    color: #ffffff;
    
}
.active,a:hover {
    background: #FF2628;
    transition: .10s;
}
main {
    background-image: url("../Picture/background_page.jpg");
}
.function,
.publication {
    margin: 0 20%;
}
h1 {
    text-align: center;
    margin: 16px;
    color: #fafafa;
    text-transform: uppercase;
    font-family: 'Titillium Web', serif;
    font-weight: bold;
    font-style: italic;
} 
.function p {
    font-size: 1em;
    text-align: center;
    font-style: italic;
    color: #b9aeae;
}
.function p:hover {
    color: #ffffff;
}
.function {
    position: relative;
    top: -40px;
    background-color: #701711;
    padding: 20px;
    box-shadow:
       inset 0 -3em 3em rgba(0,0,0,0.1),
             0 0  0 2px rgb(133, 42, 42),
             0.3em 0.3em 1em rgba(0,0,0,0.3);
}

.publication h2 {
    text-align: center;
    font-family: 'Beau Rivage', cursive;
    font-weight: bolder;
    font-style: italic;
    font-size: 2.5em;
    color: #7B5A39;
    position: relative;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;

}
.publication h2::before {
    content: "";
    display: block;
    width: 340px;
    height: 5px;
    background: #060b11;
    position: absolute;
    left: 0;
    top: 50%;
}
.publication h2::after {
    content: "";
    display: block;
    width: 330px;
    height: 5px;
    background: #060b11;
    position: absolute;
    right: 0;
    top: 50%;
}
.actualite h2 {
    text-align: center;
    font-family: 'Beau Rivage', cursive;
    font-weight: bolder;
    font-style: italic;
    font-size: 2.5rem;
    color: #7B5A39;
    position: relative;
    margin: 1.25rem;
    
}

.actualite h2::before {
    content: "";
    display: block;
    width: 680px;
    height: 5px;
    background: #060b11;
    position: absolute;
    left: 0;
    top: 50%;
}
.actualite h2::after {
    content: "";
    display: block;
    width: 680px;
    height: 5px;
    background: #060b11;
    position: absolute;
    right: 0;
    top: 50%;
}
.daily_news {
    display: flex;
    justify-content: center;
    justify-content: space-between;
}
.daily_news p {
    width: 500px;
    margin: 1.25rem;
    text-align: justify;
    font-size: 1rem;
    font-style: italic;
}

.books_title {
    display: flex;
    justify-content: center;
    justify-content: space-between;
}
.books_title img {
    height: 200px;
    width: 180px;
  .main_content {
   display: flex;
   justify-content: center;
   justify-content: space-around;
   padding-bottom: 1.25rem;
   padding-top: 1.25rem;
   background-color: #060b11;
   color: rgb(255, 255, 255);
   border-top: 6px solid #8C2C23;
    
}

h4 {
    font-size: 1rem;
    padding-bottom: 20px;
    text-transform: uppercase;
}
.text , i{
    padding: 5px;
}

.copyright h6{
    text-align: center;
    background-color:#262626;
    color: #999999;
}

.social li {
    display: inline;
    
}

.social a ,li {
    color: #ffffff;
}


/* About us page */

label {
    width: 100px;
    display: inline-block;
    padding: 10px;
}

.form_2 label {
    width: 400px;
}

.container_2 { 
    display: flex;
    padding-top: 60px;
    margin-left: 40px;
    margin-right: 40px;
    padding-bottom: 50px;
    align-items: flex-start;
    border: 1px solid rgb(173, 172, 172);
    font-size: 18px;
    font-weight: bold;
    background-color: #BC4913;

}


textarea {
    resize: horizontal;
    min-width: 320px;
}

h3 {
    font-size: 1.875rem;
    padding-bottom: 60px;
}

.form_1 {
    padding-right: 80px;
    padding-left: 200px;
    flex: 2;
    order: 2;
    
}



.form_2 {
    flex: 2;
    order: 2;
}


.form_2 button {
    background-color: rgb(8, 8, 8);
    border-radius: 0;
    width: 400px;
}


/* Books Summary */

.title h1{
    color: #fcf9f9;
    background-color: #BC4913;
    padding-bottom: 120px;
    
}

.Books_Sum {
    display: flex;
    width: 30%;
    background-color: #fff;
    padding: 15px;
    gap: 20px;
    margin-left: 210px;
    
}


.column {
    box-shadow: 0 5px 5px rgba(0,0,0,0.30);
}
.card_image {
    width: 250px;
    display: block;
    margin-bottom: 10px;
}



.Books_Sum p {
    font-size: 1.125rem;
    line-height: 1.5;
    height: 90px;
    overflow: hidden;
    text-align: justify;
    padding: 15px;
}



.Books_Sum a{
   display: inline-block;
   color: #fff;
   background-color: #060b11;
   text-decoration: none;
   border-radius: 8px;
   margin-top: 15px;
   margin-left: 70px;
   font-size: 1rem;
   padding: 10px;
   margin-bottom: 15px;

}

.Books_Sum a:hover {
    box-shadow: 0 5px 5px rgba(0,0,0,0.2);
}

.Books_Sum .showContent p{
    height: auto;
}
.Books_Sum .showContent a.readmore-btn{
    background-color: #f7090d;
}

/*Author lists */

.List_author {
    display: flex;
}

.title_authors {
    background-color: #BC4913;
    padding-bottom: 120px;
}

@media only screen and(max-width: 480px){
    .nav_link {
        background-color: #060b11;
    }
}

<!DOCTYPE html>
<html lang="en-fr">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accueil | Reflexionjuridique</title>
    <link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
    <link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
    <link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
    <link href="https://fonts.googleapis.com/css2?family=Beau Rivage&display=swap" rel="stylesheet">
 </head>
 
 <body>  
    <header>   
      <figure >
        <img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
      </figure>      
      <ul >
        <li><a  href='index.html' target="_self">Accueil</a></li>
        <li><a href='Catalogue.html' target="_self">Catalogue</a></li>
        <li><a href='Service.html' target='_self'>Services</a></li>
        <li><a href='Historique.html' target='_self'>Historique</a></li>
        <li><a href='Contact.html' target='_self'>Contact</a></li>
      </ul>      
    </header>   
    <main>
      <section >
         <h1>RÉFLEXION JURIDIQUE</h1><br>
         <p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité.
            Ce mot est utilisé ici dans le sens de lutter contre une conspiration sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur.
            Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier  tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche de tous les documents ou livres que tout congolais rédige à l’étranger.   
         </p>
      </section>
      <section >
             <h2>nos dernière publication</h2>
        <div >
                 <img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
                 <img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
                 <img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
                 <img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
                 <img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
        </div>  
      </section>
      <section >
        <h2>actualités quotidiennes</h2>
        <div >
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
        </div>
      </section>
  </main>
  <footer>
      <div >
          <div >
              <h4>Place</h4>
            <i ></i>
             <span >123 Avenue Kabila, Lubumbashi</span><br>
             <i ></i>
            <span > 243 9006146871 |   243 892850171</span><br>
            <i ></i>
            <span >[email protected]</span>
          </div>
          
          <div >
              <h4>réseaux sociaux</h4>
            <ul>
                <li><a href="#"><i ></i></a></li>
                <li><a href="#"><i ></i></a></li>
                <li><a href="#"><i ></i></a></li>
                <li><a href="#"><i ></i></a></li>
                <li><a href="#"><i ></i></a></li>
            </ul>
          </div>
      </div>
      <div >
        <h6>&copy;2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
        <h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
      </div>
  </footer>
</body>
</html>

CodePudding user response：

You just need to add a space after and:

@media only screen and (max-width: 480px){
    .nav_link {
        background-color: #060b11;
    }
}

You also need to close the class tag on .books_title img

.books_title img {
    height: 200px;
    width: 180px;
    }

You also have </a> tags after your images. If you're trying to format those somehow, you need to use the opening <a> tag before the <img...> section because currently, they're doing nothing but creating errors.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
}


/*Navigation bar*/

header {
  background-image: url("../Picture/sutterlin-g4d210ab6b_1920.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.logo img {
  max-width: 100px;
  max-height: 100px;
  margin-top: 30%;
}

.nav_link {
  text-align: center;
  margin-top: 5%;
  margin-bottom: 5%;
}

.nav_link li,
a {
  display: inline-block;
  padding: 7px 13px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3px;
  font-weight: bold;
  color: #ffffff;
}

.active,
a:hover {
  background: #FF2628;
  transition: .10s;
}

main {
  background-image: url("../Picture/background_page.jpg");
}

.function,
.publication {
  margin: 0 20%;
}

h1 {
  text-align: center;
  margin: 16px;
  color: #fafafa;
  text-transform: uppercase;
  font-family: 'Titillium Web', serif;
  font-weight: bold;
  font-style: italic;
}

.function p {
  font-size: 1em;
  text-align: center;
  font-style: italic;
  color: #b9aeae;
}

.function p:hover {
  color: #ffffff;
}

.function {
  position: relative;
  top: -40px;
  background-color: #701711;
  padding: 20px;
  box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1), 0 0 0 2px rgb(133, 42, 42), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}

.publication h2 {
  text-align: center;
  font-family: 'Beau Rivage', cursive;
  font-weight: bolder;
  font-style: italic;
  font-size: 2.5em;
  color: #7B5A39;
  position: relative;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.publication h2::before {
  content: "";
  display: block;
  width: 340px;
  height: 5px;
  background: #060b11;
  position: absolute;
  left: 0;
  top: 50%;
}

.publication h2::after {
  content: "";
  display: block;
  width: 330px;
  height: 5px;
  background: #060b11;
  position: absolute;
  right: 0;
  top: 50%;
}

.actualite h2 {
  text-align: center;
  font-family: 'Beau Rivage', cursive;
  font-weight: bolder;
  font-style: italic;
  font-size: 2.5rem;
  color: #7B5A39;
  position: relative;
  margin: 1.25rem;
}

.actualite h2::before {
  content: "";
  display: block;
  width: 680px;
  height: 5px;
  background: #060b11;
  position: absolute;
  left: 0;
  top: 50%;
}

.actualite h2::after {
  content: "";
  display: block;
  width: 680px;
  height: 5px;
  background: #060b11;
  position: absolute;
  right: 0;
  top: 50%;
}

.daily_news {
  display: flex;
  justify-content: center;
  justify-content: space-between;
}

.daily_news p {
  width: 500px;
  margin: 1.25rem;
  text-align: justify;
  font-size: 1rem;
  font-style: italic;
}

.books_title {
  display: flex;
  justify-content: center;
  justify-content: space-between;
}

.books_title img {
  height: 200px;
  width: 180px;
}

.main_content {
  display: flex;
  justify-content: center;
  justify-content: space-around;
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
  background-color: #060b11;
  color: rgb(255, 255, 255);
  border-top: 6px solid #8C2C23;
}

h4 {
  font-size: 1rem;
  padding-bottom: 20px;
  text-transform: uppercase;
}

.text,
i {
  padding: 5px;
}

.copyright h6 {
  text-align: center;
  background-color: #262626;
  color: #999999;
}

.social li {
  display: inline;
}

.social a,
li {
  color: #ffffff;
}


/* About us page */

label {
  width: 100px;
  display: inline-block;
  padding: 10px;
}

.form_2 label {
  width: 400px;
}

.container_2 {
  display: flex;
  padding-top: 60px;
  margin-left: 40px;
  margin-right: 40px;
  padding-bottom: 50px;
  align-items: flex-start;
  border: 1px solid rgb(173, 172, 172);
  font-size: 18px;
  font-weight: bold;
  background-color: #BC4913;
}

textarea {
  resize: horizontal;
  min-width: 320px;
}

h3 {
  font-size: 1.875rem;
  padding-bottom: 60px;
}

.form_1 {
  padding-right: 80px;
  padding-left: 200px;
  flex: 2;
  order: 2;
}

.form_2 {
  flex: 2;
  order: 2;
}

.form_2 button {
  background-color: rgb(8, 8, 8);
  border-radius: 0;
  width: 400px;
}


/* Books Summary */

.title h1 {
  color: #fcf9f9;
  background-color: #BC4913;
  padding-bottom: 120px;
}

.Books_Sum {
  display: flex;
  width: 30%;
  background-color: #fff;
  padding: 15px;
  gap: 20px;
  margin-left: 210px;
}

.column {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.30);
}

.card_image {
  width: 250px;
  display: block;
  margin-bottom: 10px;
}

.Books_Sum p {
  font-size: 1.125rem;
  line-height: 1.5;
  height: 90px;
  overflow: hidden;
  text-align: justify;
  padding: 15px;
}

.Books_Sum a {
  display: inline-block;
  color: #fff;
  background-color: #060b11;
  text-decoration: none;
  border-radius: 8px;
  margin-top: 15px;
  margin-left: 70px;
  font-size: 1rem;
  padding: 10px;
  margin-bottom: 15px;
}

.Books_Sum a:hover {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.Books_Sum .showContent p {
  height: auto;
}

.Books_Sum .showContent a.readmore-btn {
  background-color: #f7090d;
}


/*Author lists */

.List_author {
  display: flex;
}

.title_authors {
  background-color: #BC4913;
  padding-bottom: 120px;
}

@media only screen and (max-width: 480px) {
  .nav_link {
    background-color: #060b11;
  }
}

<!DOCTYPE html>
<html lang="en-fr">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accueil | Reflexionjuridique</title>
  <link rel="stylesheet" href="../MaisonEdition/Resources/Css/styles.css">
  <link rel="shortcut icon" type="image/jpg" href="../MaisonEdition/Resources/Picture/Logo.jpeg">
  <link rel="stylesheet" href="../MaisonEdition/Resources/Css/fontawesome-free-5.15.4-web/css/all.css">
  <link href="https://fonts.googleapis.com/css2?family=Beau Rivage&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <figure >
      <img src="../MaisonEdition/Resources/Picture/LogoTransparent.png" alt="logo">
    </figure>
    <ul >
      <li><a  href='index.html' target="_self">Accueil</a></li>
      <li><a href='Catalogue.html' target="_self">Catalogue</a></li>
      <li><a href='Service.html' target='_self'>Services</a></li>
      <li><a href='Historique.html' target='_self'>Historique</a></li>
      <li><a href='Contact.html' target='_self'>Contact</a></li>
    </ul>
  </header>
  <main>
    <section >
      <h1>RÉFLEXION JURIDIQUE</h1><br>
      <p>La jeune maison d’édition Réflexion Juridique n’étant qu’une association d’impression et de la diffusion des livres ou d’autres documents agit comme un intermédiaire entre un auteur et ses lecteurs. Pour cela, elle supervise les productions des
        ouvrages mis à sa disposition au préalable tout en s’assurant que les productions puissent répondre aux critères ci-après :Qualité de l’écriture,e l’intrigue, et Originalité. Ce mot est utilisé ici dans le sens de lutter contre une conspiration
        sécrète ou déloyale visant à obtenir les avantages qui peuvent nuire à l’auteur. Cependant la sélection n’est pas la seule fonction de notre jeune maison d’édition des livres Réflexion Juridique ; après le choix ou la sélection de texte de nos
        clients, elle signe un contrat d’édition avec l’auteur qui l’oblige à accompagner ce dernier tout au long du processus de la création et de la diffusion du livre et cela en tenant compte de l’article 4 de la loi n° 74-003 du 2 Janvier 1974 relative
        au dépôt légal obligatoire des publications, le Décret du 2 juillet 2002 sur la nomenclature des actes générateurs des recettes sur la propriété intellectuelle et l’article 7 de l’Ordonnance n°89-010 du 18 Janvier 1989 portant la création de la
        Bibliothèque Nationale du Zaïre d’une part et d’autre part les arrêtes conjoints du 29 Juin 1977 fixant les modalités d’application et l’article 2 de l’arrêté n° 033/76 du 04 Octobre 1976 relatif au dépôt légal auprès de l’ambassade la plus proche
        de tous les documents ou livres que tout congolais rédige à l’étranger.
      </p>
    </section>
    <section >
      <h2>nos dernière publication</h2>
      <div >
        <img src="../MaisonEdition/Resources/Picture/droit_image.jpg" alt="Droit"></a>
        <img src="../MaisonEdition/Resources/Picture/Protection_Enfant.jpg" alt="Enfant"></a>
        <img src="../MaisonEdition/Resources/Picture/Contrat.jpeg" alt="Contrat"></a>
        <img src="../MaisonEdition/Resources/Picture/dime.jpg" alt="Dime"></a>
        <img src="../MaisonEdition/Resources/Picture/police.jpg" alt="police"></a>
      </div>
    </section>
    <section >
      <h2>actualités quotidiennes</h2>
      <div >
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. A voluptatibus unde veniam iure, porro temporibus aliquam ipsum alias magni voluptatum. Autem minima nobis consectetur voluptatum assumenda quos deserunt nesciunt blanditiis.</p><br>
      </div>
    </section>
  </main>
  <footer>
    <div >
      <div >
        <h4>Place</h4>
        <i ></i>
        <span >123 Avenue Kabila, Lubumbashi</span><br>
        <i ></i>
        <span > 243 9006146871 |   243 892850171</span><br>
        <i ></i>
        <span >[email protected]</span>
      </div>

      <div >
        <h4>réseaux sociaux</h4>
        <ul>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
          <li><a href="#"><i ></i></a></li>
        </ul>
      </div>
    </div>
    <div >
      <h6>&copy;2021 Ashwell publishing Ldt-Register in England No.6431579 |</h6>
      <h6>Terms & Conditions | Privacy Policy | Cookies Policy</h6>
    </div>
  </footer>
</body>

</html>