Why is there a difference in style between the 2 divs?

Question

I am trying to learn styled-components and built this component:

import React from 'react'
import styled from 'styled-components'

const Row = styled.div`
`

const Column = styled.div`
    flex: 0 0 50%;
    max-width: 50%;
`

export default () => {
    return (
        <div className="container-fluid">
            <div className="row">
                <Column>50%</Column>
                <Column>50%</Column>
            </div>
            <div className="row">
                <div className="col-sm-6">50%</div>
                <div className="col-sm-6">50%</div>
            </div>
        </div>
    )
}

The first row contains a styled component and the second row does not but has the same css rule but with a mediaquery , still the layout is different:

@media (min-width: 576px)
.col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 61%;
    max-width: 50%;
}

Codepen

Answer 1

Bootstrap columns also take padding-right: 15px; padding-left: 15px; that is the reason why layout is little different.

Check Bootstrap documentation.