html+两个元素同一行,HTML在同一行显示两个div

只是想知道是否有人可以帮助我在这个代码笔上显示在同一行上半年和下半年？我试过display:inline;然而这并没有解决问题。

HTML：

Homepage

Header

Sub Header

1st half

2nd half

CSS：

a {

text-decoration: none;

}

body {

background-color: #161616;

}

header {

height: 100%;

background-image: url(http://i.imgur.com/11nVLmd.jpg);

background-size: cover;

background-position: center;

margin-bottom: 0;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

text-align: center

}

#landingpagelg {

font-family: Caviar Dreams;

font-size: 42px;

color: #FFF;

letter-spacing: 1px

}

#landingpagesm {

font-family: Caviar Dreams;

font-size: 21px;

color: #FFF

}

#CMSub {

min-width: 75px;

}

a {

color: #000;

}

a.hover {

color: 0000EE;

}

::selection {

background: #FFB870;

/*#CCCCCC*/

}

::-moz-selection {

background: #FFB870;

}

img::selection {

background: transparent

}

img::-moz-selection {

background: transparent

}

input {

width: 150px;

border: 1px solid;

border-radius: 6px;

height: 25px;

padding: 4px;

}

textarea {

border: 1px solid;

max-width: 500px;

max-height: 250px;

border-radius: 5px;

width: 250px;

height: 125px;

}

#github {

padding-right: 5px;

}

.footerwrapper {

width: 100%;

}

.BFS {

height: 150px;

width: 50%;

background-color: #161616;

}

.BLFS {

height: 150px;

width: 50%;

background-color: #99CCFF;

}