Align elements with flexbox

Question

I'm on student project ( I have to reproduce desktop mockup) and from many hours I don't know what to do with flexbox. I'm trying to align 3 elements in same rows.

So , I make a division to get the width for each elements and I got 33.33%, but when I'm trying to code it I'm not sure of the reason that the third element go under the two others.

I used the inspector to see

/* GENERAL RULES */

/* FONT */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:ital,wght@1,300&family=Source+Sans+Pro:wght@600&display=swap');

*
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}

body
{
    font-family: 'Raleway', sans-serif;
}

/* HEADER */

header
{
    display: flex;
    justify-content: space-between;
}

#logo
{
    margin-left: 55px;
    margin-top: 12px;
}
#menu ul 
{
    display: flex;
    flex-direction: row;
}

#menu ul li
{
    padding: 30px;
    margin-right: 35px;
    
}

#menu a:visited
{
    color:black;
}

#menu ul li:hover
{
    border-top: 1px solid #0065FC;
}
#menu ul li a:hover{
    color:#0065FC;
}

/* END OF HEADER */

/* Section-1 */

 .city_search
 {
     margin-left: 35px;
 }

.hosting_description
{
    margin-top: 25px;
}
.hosting_description .city_search > p 
{
    color:gray;
    line-height:45px;
    
}

.hosting_description #map-marker
{
    background-color:#F0F0F0;
    padding: 14px 14px 17px 14px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    position: relative;
    left:4px;
    
}

.hosting_description a 
{
    background-color: #0065FC;
    padding: 14px 14px 13px 14px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    text-align: center;
    position: relative;
    top:2px;
    left:53px;
}

.hosting_description a:visited
{
    color:white;
}

.city_search--input{
}
input[type=text]
{
    padding:15px;
    border: none;
    outline: transparent;
    
}
::placeholder
{
    color:black;
    font-weight: 700;
}

.filters
{
    display: flex;
    margin-top:50px;
    margin-left: 55px;
    margin-bottom: 15px;
}

.filters h4{
    margin-left: -8px;
}

.filters .fas
{
    margin-left: -50px;
    background-color:#DEEBFF;
    color: #0065FC;
    border-radius: 50%;
    padding: 15px;
    position: relative;
    left:72px;
    z-index: 1000;
    bottom: 15px;
}


.filters .fas:nth-child(4)
{
    position: relative;
    left: 68px;
}


.filters .fas:nth-child(6)
{
    position: relative;
    left: 68px;
}

.filters p 
{
    margin-left: 25px;
    border: 1px solid #E8E8E8;
    border-radius: 50px;
    padding:15px 15px 15px 55px;
    position: relative;
    bottom: 15px;
}

.filters .fas:hover
{
color:white;
background-color:#0065FC;
cursor: pointer;
}

.filters p:hover
{
    cursor: pointer;
    color:white;
background-color:#0065FC;
}

#filters_indications {
    font-size: 16px;
    margin-left: 50px;
    color:gray;
}
#filters_indications .fas
 {
    border: 1px solid #E8E8E8;
    border-top-right-radius: 80%;
    border-top-left-radius: 80%;
    border-bottom-left-radius: 80%;
    border-bottom-right-radius: 80%;
    padding: 5px 10px 5px 10px;
    font-size: 12px;
    color:blue;
    margin-right: 8px;
    position: relative;
    bottom: 2px;
}

/* END OF SECTION -1 */

/* SECTION -2 */

.section-2
{
    display: flex;
    justify-content: center;
    
}

.card_hostings{
    
    display: flex;
    flex-wrap:wrap;
    align-content: flex-start;
    background-color: lightgray;
    width:50%; 
    border-radius: 50px / 50px;
    
}



.item{
    position: relative;
    top:100px;
    width:33%;
    background-color: white;
    margin-bottom: 25px;
    border-top-right-radius: 10%;
    border-top-left-radius:10% ;
    border-bottom-left-radius: 10%;
    border-bottom-right-radius: 10%;
    padding: 5px;
}


.item img{
    width: 100%;
    height:162px;
    border-top-right-radius: 10%;
    border-top-left-radius:10% ;
    
}
.item p {
    line-height: 30px;
}
.card_hostings--2{
    display: flex;
    flex-direction: column;
    background-color: lightgray;
    width: 20%;
    margin-left: 30px;
    
}

.item--2{
    width: 300px;
}

.item--2 img{
    width: 100%;
    height: 162px;
    border-top-right-radius: 10%;
    border-top-left-radius:10% ;
}





    
    
    
    Booki - AgenceDevetMoi
    
    
    
    
    
    




    

    
        
        
            
            
            
        
        
        
            
            
                
                Hébergements
                Activités
                
            
        
        
        
    
    
    
    
    
    
    
        
        
            
            

                Trouvez votre hébergement pour des vacances de rêve
                En plein centre ville ou en pleine nature
                

                    
                    Rechercher

                
            
            
        
        
        
            
            Filtres
                
            
             
            Économique
        
                    
            
            Familial
            
            
            Romantique
            
            
            Animaux autorisés
            
        
        
            
            
            Plus de 500 logements sont disponibles dans cette ville
        
    
    
    
    
    
    
    
        
        Hébergements à Marseille
        
        
            
            
            
                
                
                Auberge La Cannebière
                Nuit à partir de 25€
                
                
                
                
                
                
                
            
            
            
                
                
                Hôtel du port
                Nuit à partir de 52€
                
                
                
                
                
                
            
            
            
                
                
                Hôtel Les mouettes
                Nuit à partir de 76€
                
                
                
                
                
                
                
            
            
            
                
                
                Hôtel de la mer
                Nuit à partir de 46€
                
                
                
                
                
                
                
                
            
            
            
                
                
                Auberge Le Panier
                Nuit à partir de 23€
                
                
                
                
                
                
                
            
            
            
                
                
                Hôtel chez Amina
                Nuit à partir de 96€
                
                
                
                
                
                
            
            
            
            
        
        
        
        
            Les plus populaires 
            
            
                
                
                Hôtel Le soleil du 
 matin 
                Nuit à partir de 128€
                
                
                
                
                
                
            
            
            
                
                
                Au coeur de l'eau 
 Chambres d'hôtes
                Nuit à partir de 71€
                
                
                
                
                
                
                
            
            
            
                
                
                Hôtel Tout bleu et 
 Blanc
                Nuit à partir de 68€
                
                
                
                
                
                
                
            
            
        
        
        
    
    
    
    
    
    
    
    
        
        Activités à Marseille
        
        
            
            
                
                
                Vieux port
                
            
            
            
                
                
                Fort de Pomègues
                
            
            
            
                
                
                Îles du Frioul
                
            
            
            
                
                
                Parc National des Calanques
                
            
            
            
                
                
                Parc National des Calanques
                
            
            
            
                
                
                Notre-Dame-de-la-Garde
                
            
            
            
                
                
                Parc Longchamp
                
            
            
        
        
    
    
    
    
    
    
    
        
        À propos
        
        
            
            Fonctionnement du site
            Conditions générales de vente
            Données et confidentialité
            
        
        
        Nos hébergements
        
        
            
            Charte qualité
            Soumettre votre hôtel
            
        
        
        Assistance
        
        
            
            Centre d'aide
            Nous contacter

what happend and I clearly see that the width seems to be the problem but I don't know how to resolve it...

Could you help me ? ( I already see many topics about flexbox and same problems but I couldn't applies them to my situation)

This is the design that I have to reproduce and the part that I want to do is the middle one on left with 6 pictures.

And here what I've done :

user_142870 · Answer

It's because you're not factoring in the padding: 5px. So, it's calculating 33% + 5px, which means each part is MORE than a third, which means only 2 will fit per row.

You either:

- remove the 5px padding with width: calc(33% - 10px)
- add the rule: border-box: box-sizing so the padding is part of the 33% instead of being added separately

See:

https://www.w3schools.com/CSSref/css3_pr_box-sizing.asp https://www.w3schools.com/csS/css_padding.asp

Align elements with flexbox

1 Answers