5 Element, All set to 20% And one of them is below other 4. why?

Question

I'm making portfolio website. HTML:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Krzysztof Włostowski</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
            <div class="langauges">
                <h3>Languages i knows</h3>
                <div class="panels">
                    <div class="panel">
                        <img src="imgs/html.png" alt="HTML Logo">
                        <h4>HTML</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/css.png" alt="CSS Logo">
                        <h4>CSS</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/javascript.png" alt="JavaScript Logo">
                        <h4>JavaScript</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/php.png" alt="PHP Logo">
                        <h4>PHP</h4>
                    </div>
                    <div class="panel">
                        <img src="imgs/sql.png" alt="SQL Logo">
                        <h4>SQL</h4>
                    </div>
                </div>
            </div>
</body>
<script>
    var date = new Date();
    var year = date.getFullYear();
    document.getElementById('credits').innerHTML = year;
</script>
</html>

CSS:

.languages{
    width: 100%;
}

.panels{
    width: 100%;
    text-align: center;
}

.panels .panel{
    width: 20%;
    display: inline-block;
}

.panels .panel img, .programs-list tr td img{
    width: 40px;
    height: auto;
}

I don't understand why the SQL panel is below others (20x5= 100 right?) thank you for your help.

yes i am beggining

setting it to 19% works but its not aligned perfectly. there is this feeling off going from the outside to the middle.Check out the problem

Felippe Regazio · Accepted Answer · 2023-02-06T23:55:28.217

Probably you have a box-model collision (try to set panel as box-sizing: border-box), and/or you may have any kind of foreign border or padding increasing your 20%*5.

If you want all items inside .panels to be horizontally aligned, you can try this:

.languages{
    width: 100%;
}

.panels{
    width: 100%;
    text-align: center;
+    display: flex;
+    align-items: center;
}

.panels .panel{
-    width: 20%;
+    width: 100%;
-    display: inline-block;
}

.panels .panel img, .programs-list tr td img{
    width: 40px;
    height: auto;
}

The display flex tell to your wrapper div to (by default) force all the elements to be displayed horizontally. You can add the prop flex-wrap: wrap; if you want flex to break the elements line when no space available to all of them instead of force overflow.

Here is a demonstration of flexbox: https://codepen.io/team/css-tricks/pen/EKEYob

5 Element, All set to 20% And one of them is below other 4. why?

1 Answers1