* { margin: 0; padding: 0; font-family: "open sans", sans-serif; } html{ background:#f1f1f1; } .menu{ background: #444; padding: 20px; min-height: 67px; } .menu ul { display: inline; width:1000px; margin:auto; padding:0 40px; } .logo { font-size: 35px; font-weight:bold; float: left; } .menu ul li { list-style: none; margin: 0; margin-top: 15px; color: #b2b1b1; cursor: pointer; } .menu ul li a { text-decoration: none; list-style: none; color: #fff; cursor: pointer; } .signup-btn { text-decoration: none; color: #888; background: #fff; opacity: 1; border: 1px solid #fff; border-radius: 4px; padding: 8px 16px; float:right; margin:-19px 0 0 0; } .signup-btn span { color: #888; padding: 8px 16px; } .container3 { width: 100%; height: 100%; background: #34495e; } .about-section { width: 100%; background: #f1f1f1; padding: 60px 0; } .inner-width { max-width: 1000px; overflow: hidden; padding: 0 20px; margin: auto; } .about-section h1 { text-align: center; } .border { width: 100px; height: 3px; background: #19dafa; margin: 40px auto; } .about-section-row { display: flex; flex-wrap: wrap; } .about-section-col { flex: 50%; } .about { padding-right: 30px; } .about p { text-align: justify; margin-top: 20px; } .about a { display: inline-block; color: #000; text-decoration: none; border: 2px solid #19dafa; border-radius: 24px; padding: 8px 40px; transition: 0.4s linear; } .about a:hover { color: #000; background: #19dafa; font-weight: 600; } .skills { padding-left: 30px; } .skill { margin-bottom: 10px; } .progress { width: 100%; height: 12px; background: #ddd; border-radius: 12px; } .progress-bar { height: 12px; background: #19dafa; border-radius: 12px; } .p1 { width: 90%; } .p2 { width: 70%; } .p3 { width: 50%; } .progress-bar span { float: right; margin-right: 6px; line-height: 13px; color: #000; font-size: 12px; } @media screen and (max-width: 700px) { .about-section-col { flex: 100%; margin: 10px 0; } .about, .skills { padding: 0; } .about { text-align: center; } }