justify-content and align-items not working on flex display

Question

At the footer, I want to align this .contact div and .subscription div on each side of the margin but while .contact justifies itself at flex-start, .subscription div isn't justifying at the flex-end. Can you please point-out what's wrong with my code?




    
    
    
    Cocohealth
    


    




    
        
            
                
                    
                      
                
                
                
                    
                        

                        
                        
                            HOME
                            BENFITS
                            PRICING
                            CONTACT
                        
                        
                    
                
                
        
        
            
                
                    

                    
                        COCOHEALTH
                    
                    
                        Organic Extra Virgin Coconut Oil
                    
                
                

                
                    
                        Cocohealth is an excellent, high quality extra virgin coconut handcrafted by cold pressed modified natural fermentation method at a FDA approved production Facility. 
                        Due to the use of free range organic coconuts, freshness, careful handling in all stages of 
                        processing and following all GMP standards, our Cocohealth has less FFA (i.e. free fatty acid) 
                        and more MCTs (Medium Chain Triglycerides) than average VCO. 
                        

Therefore, it rivals any other 
                        virgin coconut oil for in taste and quality hence the word 'extra', but retains a mild coconut 
                        flavor and aroma. It is purely organic, as Myanmar coconut trees are free range in nature and 
                        none of the coconut farmer uses fertilizers and other chemicals. This oil is crystal clear and 
                        colorless in the liquid state and an immaculate white when solid. No chemicals or heat are used 
                        in any stage of the process.

                    
                


                
                    
                      
                      
                      
                      
                    
                    
                      
                        
                      
                      
                        
                      
                      
                        
                      
                      
                        
                      
                    
                    
                    
                               
            
            
              


                    Health Benefits of Consuming our Cocohealth
                    


                    
                      
                        

                          
                            Improves or Reverses Alzheimer's disease
                            Improves Type 2 AND Type 1 Diabetes
                            Reduces Heart Diseases
                            Promotes Weight Loss
                            Supports the Immune System
                            Improves or Heals Many Skin Diseases
                            Conditions and Strengthens Hair
                            Provides Peak Performance Energy
                            Kills Candida Fungus
                            Helps with Hypothyroidism
                             Kills many Bacteria AND Viruses
                          
                      
                      

                          
                        
                    
                    
            
            
              Available Products of Cocohealth
              

                
                  
                  
                    Cocohealth Body Moisture Lotion (Fruity peach scent)
                    9000 MMK
                  
                  
                    
                  
                

                
                  
                  
                    Cocohealth Body Moisture Lotion (Sakura scent)
                    9000 MMK
                  
                  
                    
                  
                

                
                  
                  
                    Cocohealth Body Moisture Lotion (Tea-leaf scent)
                    9000 MMK
                  
                  
                    
                  
                

                
                  
                  
                    Cocohealth Cold Pressed
                    8000 MMK
                  
                  
                    
                  
                

                
                  
                  
                    Cocohealth Night Serum
                    6000 MMK
                  
                  
                    
                  
                
              
            
            
        
        
          
                
                  
                    
                      N0.55, Sein Lei Kan Thar Street,
                    

                    
                      Ywar Thar Gyi Industrial Zone,
                    

                    
                      South Dagon T/S,
                    

                    
                      Yangon, Myanmar
                    

                  
                
               
                
                  
                    
                      
                          Get More Updates : 
                      

                      
                        
                      
                      
                        
                        
                      
                        Phone  : +959 4211 44724
                      

                      
                        E-mail : info@mya-ayer.com

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
    margin:0;
    padding:0;
    scroll-padding-top: 70px;
    scroll-behavior: smooth;

}
main {
    background: #FDFC47;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #e8fd88, #ffffff,#e8fd88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
header {
    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #a8e063, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    position: fixed;
    height: 80px;
    right: 0;
    left: 0;
    z-index: 3;
}

.color {
    margin:5px;
    border-radius: 10px;
    font-family: 'Raleway',serif;
    color:white;
}

.color:hover {
    color:bisque;
}

@media only screen and (max-width: 575.98px) {
    #collapseNav {
    background:     rgb(66, 172, 25,0.7);    
}

  .color:hover {
    background-color: white;
    color:#2B7A0B;
  }

  .contact, .subscription {
    color:white;
    font-family: 'Raleway',serif;
    font-size: 13px;
    margin-top:10px;
}

    
}
    


#home {
    margin-top: 70px;
}
.title {
    grid-area: title;
    justify-self: center;
    align-self:center;
}

.title h1 {
    font-family: 'Amita',cursive;
    font-size: 3rem;
    color: #2B7A0B;
    margin: 0;
}

.title p {
    font-family: 'Raleway',serif;
    font-size: 17px;
    font-weight: bold;
    font-style: italic;
    color: #b9bb48;
    margin: 0;
}

.description {
    color: #797a15;
    font-family: 'Raleway',serif;
    font-size: 16px;
    margin:0 20px;
    
}

.carousel-item img {
    margin:0 auto;
    max-height: 450px; 
}

h2 {
    font-family: 'Raleway',serif;
    color: #2B7A0B;
    text-align: center;
}

iframe {
    margin:10px;
    max-width: 500px;
}


.health-benefits {
    color:#2B7A0B;
    font-family: 'Raleway',serif;
    font-size: 16px;
}

.health-benefits ul {
    list-style: square;
   
    
}
   
    

#card-container {
    margin:20px 30px; 
    flex-wrap:wrap;
    justify-content:space-evenly;

}

.flex-child {
    max-width: 17rem;
    min-width:16rem;
    margin:40px;
}

footer {

    background: #56ab2f;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #a6e45b, #56ab2f);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #a6e45b, #56ab2f); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   
}


#submit {
    color: #2B7A0B;
    background-color:white;
    
}

#submit:hover {
    background-color: #2B7A0B;
    color:white;
}

I don't know if it's because I'm using bootstrap class. I try justify-content-end and justify-self-end, but still, .subscription div is not sticking to the right margin area, instead, it still displays at where it column starts.

Rok Benko · Accepted Answer

Here you go...

Change this...

...

...to this.

...

Also, add min-width: 215px; to the .

See the snippet below.

@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&family=Raleway:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amita:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=David+Libre:wght@500&display=swap');
* {
  margin: 0;
  padding: 0;
  scroll-padding-top: 70px;
  scroll-behavior: smooth;
}

main {
  background: #FDFC47;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #e8fd88, #ffffff, #e8fd88);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

header {
  background: #56ab2f;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #a8e063, #56ab2f);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #a8e063, #56ab2f);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed;
  height: 80px;
  right: 0;
  left: 0;
  z-index: 3;
}

.color {
  margin: 5px;
  border-radius: 10px;
  font-family: 'Raleway', serif;
  color: white;
}

.color:hover {
  color: bisque;
}

@media only screen and (max-width: 575.98px) {
  #collapseNav {
    background: rgb(66, 172, 25, 0.7);
  }
  .color:hover {
    background-color: white;
    color: #2B7A0B;
  }
  .contact,
  .subscription {
    color: white;
    font-family: 'Raleway', serif;
    font-size: 13px;
    margin-top: 10px;
  }
}

#home {
  margin-top: 70px;
}

.title {
  grid-area: title;
  justify-self: center;
  align-self: center;
}

.title h1 {
  font-family: 'Amita', cursive;
  font-size: 3rem;
  color: #2B7A0B;
  margin: 0;
}

.title p {
  font-family: 'Raleway', serif;
  font-size: 17px;
  font-weight: bold;
  font-style: italic;
  color: #b9bb48;
  margin: 0;
}

.description {
  color: #797a15;
  font-family: 'Raleway', serif;
  font-size: 16px;
  margin: 0 20px;
}

.carousel-item img {
  margin: 0 auto;
  max-height: 450px;
}

h2 {
  font-family: 'Raleway', serif;
  color: #2B7A0B;
  text-align: center;
}

iframe {
  margin: 10px;
  max-width: 500px;
}

.health-benefits {
  color: #2B7A0B;
  font-family: 'Raleway', serif;
  font-size: 16px;
}

.health-benefits ul {
  list-style: square;
}

#card-container {
  margin: 20px 30px;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.flex-child {
  max-width: 17rem;
  min-width: 16rem;
  margin: 40px;
}

footer {
  background: #56ab2f;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #a6e45b, #56ab2f);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to top, #a6e45b, #56ab2f);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#submit {
  color: #2B7A0B;
  background-color: white;
}

#submit:hover {
  background-color: #2B7A0B;
  color: white;
}





  
  
  
  Cocohealth
  
  
  
  
  




  
    
      
        
          
             
        
        
        
          
            

            
              
                HOME
                BENFITS
                PRICING
                CONTACT
              
            
          
        
      
    
    
      
        
          

          
            COCOHEALTH
          
          
            Organic Extra Virgin Coconut Oil
          
        
        

        
          
            Cocohealth is an excellent, high quality extra virgin coconut handcrafted by cold pressed modified natural fermentation method at a FDA approved production Facility. Due to the use of free range organic coconuts, freshness, careful handling in all stages
            of processing and following all GMP standards, our Cocohealth has less FFA (i.e. free fatty acid) and more MCTs (Medium Chain Triglycerides) than average VCO.
            

Therefore, it rivals any other virgin coconut oil for in taste and quality hence the word 'extra', but retains a mild coconut flavor and aroma. It is purely organic, as Myanmar coconut trees are free range in nature and none of the
            coconut farmer uses fertilizers and other chemicals. This oil is crystal clear and colorless in the liquid state and an immaculate white when solid. No chemicals or heat are used in any stage of the process.

          
        


        
          
            
            
            
            
          
          
            
              
            
            
              
            
            
              
            
            
              
            
          
          
          
        
      
      
        


        Health Benefits of Consuming our Cocohealth
        


        
          
            

            
              Improves or Reverses Alzheimer's disease
              Improves Type 2 AND Type 1 Diabetes
              Reduces Heart Diseases
              Promotes Weight Loss
              Supports the Immune System
              Improves or Heals Many Skin Diseases
              Conditions and Strengthens Hair
              Provides Peak Performance Energy
              Kills Candida Fungus
              Helps with Hypothyroidism
               Kills many Bacteria AND Viruses
            
          
          

            
          

        
      
      
        Available Products of Cocohealth
        

          
            
            
              Cocohealth Body Moisture Lotion (Fruity peach scent)
              9000 MMK
            
            
              
            
          

          
            
            
              Cocohealth Body Moisture Lotion (Sakura scent)
              9000 MMK
            
            
              
            
          

          
            
            
              Cocohealth Body Moisture Lotion (Tea-leaf scent)
              9000 MMK
            
            
              
            
          

          
            
            
              Cocohealth Cold Pressed
              8000 MMK
            
            
              
            
          

          
            
            
              Cocohealth Night Serum
              6000 MMK
            
            
              
            
          
        

      
    
    
      
        
          
            
              N0.55, Sein Lei Kan Thar Street,
            

            
              Ywar Thar Gyi Industrial Zone,
            

            
              South Dagon T/S,
            

            
              Yangon, Myanmar
            

          
        

        
          
            
              
                Get More Updates : 
              

              
                
              
              
                
              
              
                Phone  : +959 4211 44724
              

              
                E-mail : info@mya-ayer.com

justify-content and align-items not working on flex display

Answers (1)

Related Questions