I have a problem in leaving a section with the icons horizontally, he is upright and can not fix ..
Full html code:
@import url('https://fonts.googleapis.com/css?family=Paytone+One');
*{
margin: 0;
padding: 0;
font-family: helvetica;
}
header{
z-index: 5;
position: fixed;
width: 100%;
height: 70px;
background-color: #fff;
-webkit-transition: background-color .5s;
}
nav{
display: table;
margin: auto;
margin-top: 15px;
height: 40px;
-webkit-transition: margin-left .5s;
}
ul{
margin-right: 850px;
display: block;
float: right;
list-style: none;
}
ul li{
float: left;
margin: 10px;
}
ul a{
color: #000;
text-decoration: none;
-webkit-transition: color .1s;
}
body{
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 300;
background-color: #3F51B5;
color: #fff;
}
.center{
text-align: center;
}
.parallax-targeta{
height: 700px;
background: transparent center fixed;
}
.parallax-targetb{
height: 300px;
background: transparent center fixed;
}
.middle{
min-height: 400px;
background: transparent;
}
.slide{
background-image: url(../img/2853636-firewatch-wallpapers.png);
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
height: 700px;
}
iframe{
position: absolute;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.sec-services {
background: #14B97D;
padding-top:70px;
padding-bottom:70px;
color:#fff;
}
#services h3{
padding-bottom:100px;
}
.sec-services h2,
.sec-services p {
font-weight: 300;
text-align: center;
}
.sec-services{
font-size:1.1em;
}
.sec-services i {
display: block;
margin: auto;
width: 45px;
}
.sec-services .fa-paint-brush {
width: 64px;
}
.sec-services .fa-code {
width: 68px
}
.sec-services h2 {
margin: 1em 0;
}
p
{
word-wrap: break-word;
}
.container-fluid {
padding: 0 1em;
}
.intro .container, .features .container, .portfolio .container, .contact .container {
padding: 5em 0;
}
.intro, .features, .portfolio, .contact {
text-align: center;
}
.intro {
background-color: #E74C3C;
color: #fff;
}
.intro a, .intro a:hover, .intro a:focus, .intro a:active, .intro a:visited {
color: #fff;
}
.features img {
display: block;
margin: 0 auto 1em;
max-width: 200px;
}
.features .col-3 {
margin: 3em auto;
width: 100%;
}<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>efecto scroll en menu</title>
<link rel="stylesheet" href="style/index_style.css">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="dependencies/parallax.js-1.4.2/parallax.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc='js/script.js'></script></head><body><header><nav><ul><ahref='http://www.keyquotes.es'><li>Inicio</li></a><ahref='http://www.keyquotes.es'><li>Videos</li></a><ahref='http://www.keyquotes.es'><li>Imágenes</li></a><ahref='http://www.keyquotes.es'><li>Youtube</li></a><ahref='http://www.keyquotes.es'><li>Nosotros</li></a><ahref='http://www.keyquotes.es'><li>Contacto</li></a></ul></nav></header><mainclass="content">
<section class="slide">
<div class="content">
<iframe src="http://www.youtube.com/embed/sVxBaRYnjgE?autoplay=1&modestbranding=1&nologo=1&rel=0&showinfo=0&theme=light&wmode=opaque&controls=0"width="690" height="400" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</section>
<section class="services">
<div id="services" class="sec-services">
<div class="container cf">
<div class="row">
<div class="col-xs-4 col-sm-4">
<i class="fa fa-4x fa-paint-brush"></i>
<h2 class="h3">1323</h2>
<p>Cfaefaekfneiafjieajfaei.</p>
</div>
<div class="col-xs-4 col-sm-4">
<i class="fa fa-4x fa-code"></i>
<h2 class="h3">1323</h2>
<p>Cfaefaekfneiafjieajfaei.</p>
</div>
<div class="col-xs-4 col-sm-4">
<i class="fa fa-4x fa-tablet"></i>
<h2 class="h3">1323</h2>
<p>Cfaefaekfneiafjieajfaei.</p>
</div>
</div>
</div>
</div>
</section>
<div class="container-fluid features" id="skills">
<div class="container cf">
<h2>Skills & Experience</h2>
<div class="col-XS-4">
<img src="https://s22.postimg.org/oi5es3fkx/icon_cloud.png"alt="">
<h3>Cloud Computing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
<div class="col-XS-4">
<img src="https://s22.postimg.org/jxj8d5vvl/icon_coding.png"alt="">
<h3>Expert Coding</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
<div class="col-XS-4">
<img src="https://s22.postimg.org/citwksa01/icon_graph.png"alt="">
<h3>Data Analysis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
</div>
</div>
<div class="parallax-targeta section-0" data-parallax="scroll" data-image-src="img/4.jpeg">
</div>
<!-- section 2 starts-->
<!-- section 3 starts-->
<div class="parallax-targetb section-1" data-parallax="scroll" data-image-src="img/3.jpeg"></div>
<!-- section 4 starts-->
</main>
<script>
$(window).on("load resize", function(e){
var vid = $("iframe");
if(e.type == "load"){
var vid_w_tag = vid.attr("width");
var vid_h_tag = vid.attr("height");
proporcao = vid_w_tag/vid_h_tag;
vid.attr("width","100%")
.css('max-width', vid_w_tag+'px');
}
var vid_w = vid.width();
vid.attr('height',vid_w/proporcao);
});
</script>
</body>
</html>As you can see in the snippet with problem in a section:
<div class="container-fluid features" id="skills">
<div class="container cf">
<h2>Skills & Experience</h2>
<div class="col-XS-4">
<img src="https://s22.postimg.org/oi5es3fkx/icon_cloud.png"alt="">
<h3>Cloud Computing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
<div class="col-XS-4">
<img src="https://s22.postimg.org/jxj8d5vvl/icon_coding.png"alt="">
<h3>Expert Coding</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
<div class="col-XS-4">
<img src="https://s22.postimg.org/citwksa01/icon_graph.png"alt="">
<h3>Data Analysis</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda modi maiores eum commodi soluta, blanditiis voluptates ea eos, cim! Neque.</p>
</div>
</div>
</div>
her css:
.intro .container, .features .container, .portfolio .container, .contact .container {
padding: 5em 0;
}
.intro, .features, .portfolio, .contact {
text-align: center;
}
.intro {
background-color: #E74C3C;
color: #fff;
}
.intro a, .intro a:hover, .intro a:focus, .intro a:active, .intro a:visited {
color: #fff;
}
.features img {
display: block;
margin: 0 auto 1em;
max-width: 200px;
}
.features .col-3 {
margin: 3em auto;
width: 100%;
}