Solucionado (ver solução)
Solucionado
(ver solução)
9
respostas

Espaço indesejado em branco ao lado direito

Boa tarde, estou treinando os aprendizados do curso mas estou com um problema e ainda não consegui arrumar, a página esta com uma parte branca no lado direito, com posso ajeitar isto ?

https://jacksonn455.github.io/

9 respostas

Boa tarde, jackson em vez de fazer com o position relative, você poderia começar a utilizar o postion flex, tem um curso aqui sobre isso, dá uma olhada, dessa forma vai facilitar bastante a sua vida na hora da criação de sites.

Não funcionou

E dae guri da terra dos monarcas! Tudo certo?

Olhando aqui , não aparece para mim esta parte branca do lado direito. Para mim apareceu normal. Ou eu não consegui identificar onde está o que se você se refere. Caso queira, me envie o print da tela ( angelico100@gmail.com ) para que eu possa tentar auxiliá-lo.

Opa, isso mesmo haah, estou te enviando 2 prints para você analizar

Olá Jackson, tudo certo?

Acredito que o erro se dê pelo fato de não se ter um 'class=container' em todas as sections. Talvez se você criar uma tag main com class=container e colocar todas as sections lá ajude.

solução!

Opa.. consegui identificar o que você está falando.. e a questão é a seguinte.. não é pelo fato de não estar em um class="container", e sim, porque existem itens do seu site que estão em uma div e que estão dentro de um class="container"

Como seu style "container" é de um tamanho de 1170px, as divs internas também ficam com este tamanho, expandindo sua tela e ficando o espaço em branco.

Um exemplo do que falo é sua div "icon-social", que está dentro de uma div "container", que também está dentro de uma div "container".

Notei que isto só esta acontecendo no seu header:

    <nav class="navbar navbar-default">
        <div class="container">

            <div class="navbar-header">
                <button class="navbar-toggle collapsed" aria-expanded="false" type="button" data-target="#collapse-navbar" data-toggle="collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="#">CURRÍCULO</a>
            </div>

            <div class="collapse navbar-collapse" id="collapse-navbar">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#universidade">UNIVERSIDADE</a>
                    </li>
                    <li>
                        <a href="#mini-cursos">MINICURSOS</a>
                    </li>
                    <li>
                        <a href="#id-competencia">STARTUPS</a>
                    </li>
                    <li>
                        <a href="#video-trabalho">PROJETOS TRABALHADOS</a>
                    </li>
                    <li>
                        <a href="#contato">CONTATO</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav><div class="topcasafina-banner">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <img class="foto-perfil" alt="Foto de perfil do Jackson Felipe Magnabosco" src="assets/img/perfil.png">
                </div>

                <div class="col-lg-6">
                    <h1 class="titulo-nome">JACKSON FELIPE MAGNABOSCO</h1>
                    <p class="legenda-titulo">Graduando em Ciência da Computação pela
                        <abbr title="Universidade Regional Integrada do Alto Uruguai e das Missões Erechim">URI-Erechim,</abbr>
                        com o objetivo de se desenvolver como profissional na área de tecnologia da informação,
                        ajudando a empresa a maximizar
                        seus resultados através de estudo, dedicação, pesquisa e inovação. </p>
                    <div class="container">
                        <div class="icon-social">
                            <a href="https://github.com/jacksonn455" target="_blank">
                                <img width="100" height="100" class="icon-image" alt="W3Schools" src="assets/img/Github-icon.png" border="0">
                            </a>
                            <a href="https://www.linkedin.com/in/jackson-felipe-magnabosco-b0a48798/" target="_blank">
                                <img width="100" height="100" class="icon-image" alt="W3Schools" src="assets/img/Linkedin-Icon.png" border="0">
                            </a>
                            <a href="https://www.instagram.com/jacksonn455/" target="_blank">
                                <img width="100" height="100" class="icon-image" alt="W3Schools" src="assets/img/instagram-icon.png" border="0">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>

Acho que é justamente esse o erro. De acordo com a documentação do bootstrap você deve evitar aninhar a classe container pelo fato delas terem um padding. Tenta tirar o container do icon social e vê no que dá.

Entendi que a ideia é ter um "container" para cada item da pagina. Até aí não vejo problema. O problema acontece quando há o container dentro do container.

Perfeito era isso mesmo, estava um container dentro do outro. obrigado pelas informações