promo.css

   * {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
          sans-serif;
      }
      .promo {
        display: flex;
        align-items: center;
        /* border: 2px solid red; */
        padding: 10px 10px;
        background-color: #ff80ab;
        /* position: fixed;
        top: 0;
        overflow: hidden;
        width: 99%; */
       
      }
      body{
        margin: 0;
        padding: 0;
      }

      .promo_mid {
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* height: 40px; */
        /* border: 2px solid red; */
        width: 38%;
        margin: auto;
        height: 40px;
      }
      input {
        font-size: 15px;
        padding: 10px 10px;
        width: 34%;
        outline: none;
        border: 2px solid gray;
      }
      /* input :focus{
            outline: none;
        } */
      .join {
        font-size: 18px;
        font-weight: 600;
        padding: 10px 10px;
        width: 13%;
        border-radius: 4px;
      }
      input:hover {
        border: 2px solid #196cff;
      }

      .material-symbols-outlined {
        font-size: 33px;
        font-weight: 800;
        cursor: pointer;
      }
      .join {
        background-color: #a378cd;
        color: white;
        border: none;
      }
      @media screen and (max-width: 1109px){
  
       
        .promo_mid {

            width: 50%;
      
          }
    }
    @media screen and (max-width: 848px){
  
       
        .promo_mid {

            width: 60%;
     
          }
    }
    @media screen and (max-width: 711px){
  
       
        .promo_mid {

            width: 80%;
     
          }
    }
    @media screen and (max-width: 566px){
  
       
        .promo_mid {

            width: 100%;
     
          }
    }