Text-align property is not working

I have applied text-align property to h2 ,h3 elements and id=“list” but its not working. I am currently working on product landing page. kindly help.

Link to my code pen- https://codepen.io/ambali_zade/pen/oNWoxEw

HTML part-

company logo

CHOSEN UNIQUE JEWELERY

Features   Collections   About us
</nav>


Email:



  <section id="features">
    <h2>Features</h2>
    <ul id="list">

  • Pocket Friendly Designs
  • 100% Certified and Free Shipping
  • One Year Warranty
  •       <section id="collections">
          <h2>Our Collections</h2>
    

    About Us

    A Name That Resonates In Every Household From a 150 sq.ft store in Pune to being one of Pune’s leading Jewellery brands with over 12 sprawling stores all over the city, Ranka Jewellers has left behind a golden trail. Our journey that began in 1879 was later re-established by Shri Pukhraj Ranka with a vision to give people authentic jewellery that is not just elegant, but in fact a class apart, along with uncompromising quality and delicate craftsmanship. This flourishing business is now steered meticulously by the sixth generation of the Ranka’s. Following in the footsteps is Mr. Tejpal Ranka (Partner), who currently manages the Pimpri Chinchwad store and primarily focuses on taking this rich legacy forward. Over 141 years into the business, we have succeeded in overcoming various obstacles and our presence in the Indian market has been marked by a number of firsts. We have expanded our variety from just gold and silver to even platinum and diamonds. Over the years, we have earned a distinct and dependable name and have emerged as the Pioneers in the jewellery business in the Western Maharashtrian market.

    CSS part-

    img {
    display: inline-block;
    max-height: 130px;
    width: auto;
    }
    h1{
    text-align: center;
    position: relative;
    top: -140px;
    }
    a{
    text-decoration: none;
    }
    a:hover {
    color: hotpink;
    }
    nav{
    text-align: right;
    position: relative;
    top: -220px;
    right: 70px;
    }
    #form {
    position: relative;
    text-align: center;
    top: -140px;
    }
    body {
    background-image: url(“https://image.freepik.com/free-vector/shiny-diamond-banner_53876-93252.jpg”);
    }
    #nav-bar {
    position: fixed;
    top: 0px;
    width: 100%;
    }
    #video {
    display: block;
    margin: 0 auto;
    }
    @media only screen and (max-width: 600px) {
    body {
    background-color: lightblue;
    font-size: 20px;
    }
    h2 {
    text-align: center;
    }
    #list {
    text-align: center;
    }
    h3 {
    text-align: center;
    }

    Your code does work, but the text is only aligned on smaller screens.

    @media only screen and (max-width: 600px) {
      body {
        background-color: lightblue;
        font-size: 20px;
      }
      h2 {
        text-align: center; 
      }
      #list {
        text-align: center;
      }
      h3 {
        text-align: center; 
      }
    

    h2 and h3 are within a media that only aligns them to the center of the screen when the page is less then or equal to 600 pixels. On smaller screens, the text will align to the center.

    Remove the h2 and h3 out of your media so it can activate on bigger screens. If the media is not working, then your browser may not support it.

    (I put borders on everything using * {border: 1px solid black} so I could see every element)

    (Make sure to format your code using back ticks via markdown)

    Use the format below but add three backticks ontop and three on the bottom

    1 Like

    Thank you very much.

    This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.