html and css

Community feedback

• 

  Ali Nemat•180

  @AliNemattPosted over 2 years ago

  Hi KOYADA KARUNAKAR, congratulations for your solution!

  you faced with problem because of your HTML. It seems that your code is automatically generated because you there is some unnecessary HTML tags! try to use flexbox for your design it will become easier . For Example : HTML :

  <div class="container">
     /// Your other elements (image + title + description & ... )
  </div>
  

  CSS :

  .container {
     display : flex;
     justify-content: center;
     flex-direction: column:
  }
  

  and for your problem : HTML :

  <div class="music-box">
     <div class="left">
        <img src="" alt="#" class="music-icon">
        <div class="texts">
          <h2 class="annual">Annual Plan</h2>
          <span>$59.99/year</span>
        </div>
     </div>
     <a href="#">cancel</a>
  </div>
  

  CSS :

  .music-box{
     display : flex;
     justify-content: space-between;
     align-items: center;
     padding: 1.5rem;
     border-radius: 10px;
  }
  .left{
     display : flex;
     gap : 10px;
     align-items:center;
  }
  .left img{
     width: 45px;
     height: 45px;
  }
  //and other required Styles!
  

  Hope it helps you! Wish you the best.

  Marked as helpful

  1

  ---

  

  koyada karunakar•40

  @karunakar900Posted over 2 years ago

  @AliNematt thankyou very much.

  0
• 

  enochlee•600

  @iamenochleePosted over 2 years ago

  you need to make some changes.

  1. reset all default browsers style, you can do that with * {margin:0; padding: 0;}

  2. Add these styles to the body body{display: grid; place-items: center; width: 100%; height: 100vh;} to bring the container to the center.

  3. maybe consider linking the music icon svg to the html page instead <img src="music-icon.svg">

  Marked as helpful

  0

  ---

  

  koyada karunakar•40

  @karunakar900Posted over 2 years ago

  @iamenochlee thankyou very much

  0