two divs not align horizontally

Issue

I just designed a simple sign-in form to practice CSS and HTML but I can’t align 2 divs horizontally to input my name and surname.

Actually, I can’t understand why if I apply a width of 50% they are stuck on top of each other and if I apply 49% width they are perfectly horizontally aligned as I want.

MY CSS (child width 50%):

I’m expecting with the child property set to 50% they should take 50% of the parent space.. but actually not, why?
what I’m doing wrong, why have to reduce the width to 49% to align them horizontally

see my image 50% width:
wrong

I want them aligned side by side like here:

ok effect

.title{
    padding: 1vh;
    text-transform: uppercase;
    font-size: 2vh;
}

.wrapper{
    margin: 0;
    padding: 0;
    background-color: yellow;
}


.parent{
    background-color: red;
    width: 100%;
}

.child{
    width: 50%; <--------- HERE THE ISSUE
    display: inline-block;
}
<body class="body">

        <div class="center">
            <h1 class="title">Sign Up New User</h1>

            <form class="submit_form">

                <div class="wrapper">
                    <div class="parent">
                        <div class="child">
                            <label for="Name">Name:</label><br>
                            <input type="text" id="Name" name="fname">
                        </div>
                        <div class="child">
                            <label for="Surname">Surname:</label><br>
                            <input type="text" id="Surname" name="fsurname" >
                        </div>
                    </div>
                </div>

            </form>
        </div>

</body>

Solution

You can use flex-box to achieve this,

I have added this in parent,

display: flex ; 
align-items: center;
justify-content: space-evenly ;

You also have to remove width: 50%; from the .child class and add the following CSS,

display:flex ; 
align-items:center;
justify-content:center ; 
flex-direction:column;
margin: 4px;

Now you can add further CSS as you want.

.title{
    padding: 1vh;
    text-transform: uppercase;
    font-size: 2vh;
}

.wrapper{
    margin: 0;
    padding: 0;
    background-color: yellow;
}


.parent{
    background-color: red;
    display:flex ; 
    align-items:center;
    justify-content:space-evenly ; 
}

.child{
    display:flex ; 
    align-items:center;
    justify-content:center ; 
    flex-direction:column;
    margin:4px ; 
}
<body class="body">

        <div class="center">
            <h1 class="title">Sign Up New User</h1>

            <form class="submit_form">

                <div class="wrapper">
                    <div class="parent">
                        <div class="child">
                            <label for="Name">Name:</label>
                            <input type="text" id="Name" name="fname">
                        </div>
                        <div class="child">
                            <label for="Surname">Surname:</label>
                            <input type="text" id="Surname" name="fsurname" >
                        </div>
                    </div>
                </div>

            </form>
        </div>

</body>

Answered By – Ankit

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published