웹문서의 header부분에 CSS를 적용하겠습니다.

왼쪽 상단에 소셜아이콘이 있고 오른쪽 상단에 전화번호가 있습니다. 

이렇게 컨텐츠를 배치하기 위해 float속성을 사용했습니다. 그리고 float을 다음 단계에 영향을 주지 않기 위해 이 부분을 감싸는 요소를 추가하고 :after선택자를 사용하여 clear하였습니다.

또한, 추가된 font awesome 라이브러리를 이용하여 소셜 아이콘을 적용하였습니다. 소셜마다 다른 칼라 지정을 위해 CSS를 추가하였습니다.

#header{position:relative;}
#header .SocialBarContainer{
    height:28px;
    border-bottom:1px solid rgb(209, 209, 209);
    background-color:rgb(219, 219, 219);}
#header .SocialBarContainer .SocialRow{width:1000px; margin:0 auto; }
#header .SocialBarContainer .SocialRow:after{clear:both;}
#header .SocialBarContainer .SocialRow .h_SocialIcons{float:left;padding:3px 10px;}
#header .SocialBarContainer .SocialRow .h_SocialIcons .snsIcon{font-size:1.2rem;}
#header .SocialBarContainer .SocialRow .h_SocialIcons .snsIcon .fa-facebook-square{color:#030f50;}
#header .SocialBarContainer .SocialRow .h_SocialIcons .snsIcon .fa-twitter-square{color:#0867a7;}
#header .SocialBarContainer .SocialRow .h_SocialIcons .snsIcon .fa-google-plus-square{
    color:#b80606;}
#header .SocialBarContainer .SocialRow .h_Contact{
    float:right;font-size:0.9rem;color:#333;padding:3px 10px;
}
#header .SocialBarContainer .SocialRow .h_Contact a{color:#333;}

다음은 로고 부분입니다.

로고는 현재 상단 중앙에 배치되어 있습니다. 또한, 이미지가 있을 경우와 없을 경우에도 텍스트로 스타일이 반영되도록 정의를 해줍니다.

#header .logo{width:1000px;margin:15px auto;text-align:center;}
#header .logo .img{width:300px;
    height:70px;border:1px solid #b80606;
    background-color:#b80606;
    display:inline-block;
    color:white;font-size:2.7rem;font-weight:800;text-align:center;line-height:70px;
    }

메뉴 부분

메뉴는 순서가 없는 목록 요소(ul)를 이용하여 하는 경우가 많습니다. 또한, 구글링하면 메뉴와 관련한 많은 솔루션들이 공개되어 있습니다. 이렇게도 할 수 있다는 것을 살펴본 후 온라인에 공개된 소스를 참조하여 원하는 것을 얻을 수 있습니다.

.nav {
    position:relative;
    background-color: #2488e6;
    z-index:1000;
  }
.nav ul {
    width:1000px;
    margin:0 auto;
    list-style-type: none;
  }
.nav ul li {
    position: relative;
    font-weight: 600;
    color: rgb(252, 252, 252);
    display: inline-block;
    padding: 15px;
    width:19%;
  }
.nav ul li a{color:#f9f9f9;}  
.nav ul li ul {
    display: none;
  }
  .nav ul li:hover {
    cursor: pointer;
    background-color: #0b4ea5;
  }
  .nav ul li:hover ul {
    display: block;
    margin-top: 15px;
    width: 190px;
    left: 0;
    position: absolute;
  }
  .nav ul li:hover ul li {
    display: block;
    background-color: #0b4ea5;
    width:190px;
  }