Why does making width: 20% pushes one of the links away?

Question

body {
    margin: 0;
}

.container div {
    display:inline-block;
    width:20%;
    box-sizing: border-box;
    text-align:center;
    background-color:green;
    padding: 0;
    border-width: 0;
}

.container a {
    text-decoration: none;
}

<div class="container">
    <div class="first"><a href="http://google.com">Google</a></div>
    <div class="second"><a href="http://google.com">Google</a></div>
    <div class="third"><a href="http://google.com">Google</a></div>
    <div class="fourth"><a href="http://google.com">Google</a></div>
    <div class="fifth"><a href="http://google.com">Google</a></div>
</div>

First of all sorry if this question is a little bit stupid but , what makes it push the last link out of the line even though I've made the width 20% ? I've tried setting padding to 0 , setting margin to 0 , but nothing seems to work. Is it my browser mistake for displaying it uncorrectly?

because the white space btween each other... – לבני מלכה Jun 25 '18 at 08:55 — לבני מלכה, Jun 25 '18 at 08:55

לבני מלכה · Answer 1 · 2018-06-25T09:18:24.950

Because the white space btween each other...(I gueess because inline-block)

You can use display:flex to container div:

.container{
    display:flex;
}

.container div {
    width:20%;
    box-sizing: border-box;
    text-align:center;
    background-color:green;
    padding: 0;
    border-width: 0;
}

.container a {
    text-decoration: none;
}

<div class="container">
    <div class="first"><a href="http://google.com">Google</a></div>
    <div class="second"><a href="http://google.com">Google</a></div>
    <div class="third"><a href="http://google.com">Google</a></div>
    <div class="fourth"><a href="http://google.com">Google</a></div>
    <div class="fifth"><a href="http://google.com">Google</a></div>
</div>

Edit: use font-size (instead flex)

    .container{
         font-size: 0;
    }

    .container div {
        display:inline-block;
        width:20%;
        box-sizing: border-box;
        text-align:center;
        background-color:green;
        padding: 0;
        border-width: 0;
    }

    .container a {
     font-size: 15px;
        text-decoration: none;
    }

<div class="container">
        <div class="first"><a href="http://google.com">Google</a></div>
        <div class="second"><a href="http://google.com">Google</a></div>
        <div class="third"><a href="http://google.com">Google</a></div>
        <div class="fourth"><a href="http://google.com">Google</a></div>
        <div class="fifth"><a href="http://google.com">Google</a></div>
    </div>

But do you know how can i make it not override this : @media screen and (max-width:400px) {.container div { width:100%; padding:100px; margin-top: 10px; }} — Edgaras, Jun 25 '18 at 09:13

Why does making width: 20% pushes one of the links away?

1 Answers1