css Alinhamento de box

Clauido José · Julho 27, 2017

Ola galera

Boa noite estou precisando de uma ajuda estou fazendo um site em asp classico e estou com um problema na patina principal tenho section onde mostro algum conteudo sobre a empresa e abaixo dessa section tenho uma galeria de fotos. O problema é que a galeria esta não está alinhada com o conteudo principal ela fica uma margem de 10pix mais ou menos de difereça vou postar o codigo.

Html

                <!-- Apresentacao -->
                <section class="sejabemvindo-container">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 wow fadeInLeftBig" data-wow-duration="1000ms" data-wow-delay="100ms">
                                <h1>Sej&aacute; bem vindos ao nosso site.</h1>
                                <hr>
                                <h2>PERSIMANN - COMERCIO E MANUTEN&Ccedil;&Atilde;O DE PERSIANA LTDA</h2>	
                            </div>
                        </div>
                    </div>
               		<!-- Sejabemvindo -->
                	<div class="conteudo">
                        <div class="container">
                            <div class="row">
                                <div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="100ms">
                                    <div class="sejabemvindo-wrap">
                                        <i class="fa fa-comments"></i>
                                        <h3>Nossa Hist&oacute;ria</h3>                        
                                        <%
                                        Sql = "SELECT * FROM tempresa ORDER BY titulo"
                                        set rs = conexao.execute(sql)
                                        %>
                                        <p><%=rs("breve")%></p>
                                        <a class="big-link-1" href="services.html">Vej&aacute; Mais</a>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-6 wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
                                    <div class="sejabemvindo-wrap">
                                        <i class="fa fa-wrench"></i>
                                        <h3>Nossos Servi&ccedil;ocs</h3>                       
                                        <%
                                        Sql = "SELECT * FROM tservico ORDER BY titulo"
                                        set rs = conexao.execute(sql)
                                        %>
                                        <p><%=rs("breve")%></p>
                                        <a class="big-link-1" href="services.html">Vej&aacute; Mais</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                	</div>
                </section>
                <!-- Sejabemvindo -->
                <!-- parceiros-container -->
                <section class="parceiros-container">
                    <div class="container">
                        <div class="row">
                            <div class="col-sm-12 parceiros-title wow fadeIn">
                                <h2><i class="fa fa-users"></i> Nossos Parceiros</h2>
                            </div>
                        </div>
                        <div class="row">                    
                            <%
                            Sql = "SELECT * FROM tparceiros WHERE principal=1 ORDER BY titulo"
                            set rs = conexao.execute(sql)
                            do while not rs.eof
                            %>    
                            <div class="col-xs-12 col-sm-6 col-md-3">
                                <ul class="gallery clearfix"> 
                                    <li div class=" parceiros wow fadeInUp">
                                        <a class="example-image-link" href="<%=rs("logo")%>" data-lightbox="example-set" data-title="">                                        
                                            <img src="<%=rs("logo")%>"  class="example-image img-responsive" />
                                        </a>
                                    </li>
                                </ul>
                            </div>
                            <%
                                rs.movenext
                            loop
                            set rs=nothing											
                            %> 
                            <div style="float:right;margin-top:10px">
                                <a href="parceiros.asp" class="btn btn-group-sm big-link-1">Veja mais</a>
                            </div>
                        </div>            
                	</div>	
       			</section>
            </div

CSS

/***********************
***** Sejabemvindo *****
************************/

.sejabemvindo-container {
    margin-top: 10px;
}

.sejabemvindo-title {
	margin-top: 20px;
    background: url(../img/line.png) left center repeat-x;
}

.sejabemvindo-wraps-title h2 {
    width: 200px;
    margin: 0 auto;
    background: #fff;
    font-family: 'Lobster', cursive;
    font-size: 24px;
    color: #5d5d5d;
    font-weight: bold;
}

.sejabemvindo-wrap {
	margin-top: 40px;
    padding: 15px 15px 20px 15px;
    background: #f8f8f8;
    border-bottom: 2px solid #96e2c0;
}

.sejabemvindo-wrap:hover {
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
    -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}

.sejabemvindo-wrap i {
    font-size: 48px;
    height: 110px;
    width: 110px;
    margin: 3px;
    border-radius: 100%;
    line-height: 110px;
    text-align:center;
    background: #ffffff;
    color: #E8CE0E;
    border: 3px solid #ffffff;
    box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    float: left;
    margin-right: 25px;
}

.sejabemvindo-wrap i { vertical-align: middle; }

.sejabemvindo-wrap h3 {
    margin-top: 13px;
    font-family: 'Droid Sans', sans-serif;
    font-size: 16px;
    color: #5d5d5d;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(255,255,255,.7);
}

.sejabemvindo-wrap p {
    padding-bottom: 7px;
    line-height: 24px;
    font-size: 14px;
}

/***************************
******** Parceiros *********
***************************/

.parceiros-container {
    margin-top: 50px;
	margin-left:0;
	float:left
}

.parceiros-title {
    background: url(../img/line.png) left center repeat-x;
}

.parceiros-title h2 {
    width: 200px;
    margin: 0 auto;
    background: #fff;
    font-family: 'Lobster', cursive;
    font-size: 24px;
    color: #5d5d5d;
    font-weight: bold;
}

.parceiros {
	width:240px;
	height:220px;
    margin-top: 40px;
    padding-bottom: 20px;
    background: #f8f8f8;
    border-bottom: 2px solid #96e2c0;
	float:left;
}
.parceiros:hover {
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.05), 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset;
    -o-transition: all .5s; -moz-transition: all .5s; -webkit-transition: all .5s; -ms-transition: all .5s; transition: all .5s;
}
.parceiros {
    margin: 0 auto;    
    padding:10px 10px;
    list-style-type:none;
}

.parceiros img{
	width: 240px;
	height:200px;
	float:left
}

alexandre99 · Agosto 28, 2017

Cara, acho mais fácil você colocar esse código em algum site tipo https://codepen.io/ para visualizarmos melhor o seu problema, é muito mais fácil do que ler todo esse código e tentar descobrir..