title: I wanna make my text Responsive in CSS but I got Problem
body: <p>I'm using media queries in my codes. I added breakpoint for my header and it worked very well but It doesn't work on my original text.
  I thought that I can fix it by changing &quot;pre&quot; tag to &quot;p&quot; but It messed up and destroyed all of spacing on my text
  so what do i do?
  In my HTML : (main-title is a class of heading and original text is a class for &quot;pre&quot; tag)</p>
  <p>In my CSS: my media queries. I tired to do on 768px screen first but it didn't work. same as other resolutions</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    /* Navbar starts ===============================================================================*/
      body{
          padding:0px;
          margin:0px;
          overflow-x: hidden;
      }
      
      .container{
          width: 100%;
          height:78px;
          position: relative;
          background-color: rgb(39, 44, 52);
          z-index: 1;
      }
      .logo{
          position: absolute;
          padding:0.6%;
          padding-top: 0.2%;
          
      }
      .nav-list{  
          font-family: 'Noto Serif', serif;
          position: absolute;
          right: 0px;
          top: 1%;
          display: flex;
          padding:1.0%;
          z-index: 1;
      }
      .nav-list a{
          margin: 15px;
          text-decoration: none;
          color: #80e560;
          transition: color 400ms ease-in-out;
      }
      .nav-list a:hover{
          color: #a8fbfc;
      }
      .nav-list ul{
          list-style-type: none;
      }
      .hamburger{
      position: relative;
      cursor: pointer;
      display: none;
      -moz-transform-origin: 20px;
      -ms-transform-origin: 20px;
      -o-transform-origin: 20px;
      -webkit-transform-origin: 20px;
      transform-origin: 20px;
      transition: width 800ms ease-in-out;
      transition: height 800ms ease-in-out;
      
      }
      .hamburger div{
          width: 20px;
          height: 2px;
          background-color: #80e560;
          margin: 3px;
          margin-left: 50%;
          transition: transform 210ms ease-in-out;
      }
      .sidemenu{
         position: absolute;
         right: 0px;
         width: 40%;
         height: 100%;
         width: 20%;
         background-color: rgb(39, 44, 52);
         transform:translateX(100%);
         transition:transform 500ms;
         z-index: 1;
         
      }
      .side-items{
          height:80%;
          justify-content:space-between;
          position: absolute;
          display: flex;
          flex-direction: column;
          font-family: 'Noto Serif', serif;
          align-items : space-between;
      }
      .side-item{
          list-style-type: none;
      }
      .side-item a{
          color: white;
          text-decoration: none;
          transition: color 500ms ease-in-out;
      }
      .side-item a:hover{color:#80e560;}
      @media screen and (max-width:1500px){
          .logo{padding-top: 0.3%;}
      }
      @media screen and (max-width:768px){
          .nav-item{
              display: none;
          }
          .hamburger{
              display:inline;
              bottom: 12px;
              right: 35px;
          }
          .side-items{
              right: 20%;
          }
          .nav-list{
              padding: 40px;
          }
          .container{
              height: 89px;
          }
          .logo{padding-top: 2%;}
      .main-title{font-size: 3vw;}
      .Original-text{font-size: 3vw;}
      }
      @media screen and (max-width:568px){
          .hamburger{
              right: 50%;
          }
          .side-items{
              right: 20%;
              font-size: 12px;
          }
          .container{
              height: 89px;
          }
          .main-title{
              font-size: 4vw;
              padding: 0px;
          }
      }
      @media screen and (max-width:280px)
      {     
           .side-items{
               right: 9%;
           }
           .hamburger{
               right: 6%;
           }
      }
      
      /* Navbar Ends ========================================================================*/
      .mid-section{
      background-image: url(/img/background.jpg);
      background-position:center; 
      background-size:cover;
      display: flex;
      flex-direction: column;
      width: 100vw; 
      height: 100vh;
      }
      @keyframes colorchange{
          0% { 
              color: rgb(216, 200, 86);
          }
          45% {
              color: rgb(231, 103, 71);
          }
          50% {
              color: rgb(198, 228, 73);
          }
          65% {
              color: rgb(179, 228, 73);
          }
          73%{
              color: rgb(70, 232, 155);
          }
          85%{
              color: rgb(70, 232, 211);
          }
          100%{
              color: rgb(69, 233, 224);
          }
      }
      .main-title{
      
          text-align: left;
          padding: 45px;
          color: rgb(234, 226, 164);
          animation-name:colorchange;
          animation-iteration-count: infinite;
          animation-duration: 7s;
          padding-bottom: 0px;
      }
      .Original-text{
          font-size: 1.8vw;
          font-family: 'Sansita Swashed', cursive;
          padding-top: 0;
          color: gold;
         
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!--Navbar Starts ====================================== --&gt;
          &lt;header&gt;     
              &lt;div class="container"&gt;
                      &lt;nav&gt;
                          &lt;div class="logo"&gt;&lt;img src="/img/logo.png"&gt;&lt;/div&gt;
                          &lt;div class="nav-list"&gt;
                              &lt;ul class="nav-item"&gt;&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                              &lt;ul class="nav-item"&gt;&lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                              &lt;ul class="nav-item"&gt;&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                              &lt;div class="hamburger" onclick="clk()" id="burger"&gt;
                                  &lt;div id="line1"&gt;&lt;/div&gt;
                                  &lt;div id="line2"&gt;&lt;/div&gt;
                                  &lt;div id="line3"&gt;&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/nav&gt;
                 &lt;/div&gt;
                 &lt;div class="sidemenu" id="sdmenu"&gt;
                  &lt;div class="side-items"&gt;
                      &lt;ul class="side-item"&gt;&lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                      &lt;ul class="side-item"&gt;&lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                      &lt;ul class="side-item"&gt;&lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;script src="/func.js"&gt;&lt;/script&gt;
      &lt;!--Navbar End===========================================--&gt;
      &lt;div class="mid-section"&gt;
          &lt;link href="https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@600&amp;display=swap" rel="stylesheet"&gt;
          &lt;h1 class="main-title"&gt;Welcome to the Land of Electronics&lt;/h1&gt;
          &lt;pre class="Original-text"&gt;
            This Land Will Show the Future! get any Electronics You need
            from us!
            eveything is ready for you. direct from manufacture
            Original components. with 2 years guarantee
            so lets go and and explore or world 
          &lt;/pre&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>