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

O alinhamento da imagem fica incorreto.

CSS

body {
    background: #FEFEFE;
}


header {
    background:#D08C60;
    padding: 20px 0;
    border: 2px solid #7F5539;
}


#icone_jornal_cabeçalho {
    width: 19%;
}


#caixa {
    width:  940px;
    margin: 0 auto;
    position: relative;
}


nav {
    position: absolute;
    top: 90px;
    right: 0;
}


nav li {
    display: inline;
    margin: 0 0 0 17px;
}


nav a {
    text-transform: uppercase;
    color: #FFFFFF;
    font-weight: bold;
    font-family: Times New Roman;
    font-size: 25px;
    transition: 0.6s; 
    text-decoration: none;
}


nav a:hover {
    color: #0077B6;
    text-decoration: underline;
}

nav a:active {
    color: #00B4D8;
    font-size: 23px;
}

.opçoes {
    width:  940px;
    margin: 0 auto;
    padding: 50px 0;

}


.opçoes li {
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
    box-sizing: border-box;
    margin: 0 1.5%;
    padding: 30px 20px;
    border: 5px double #000000;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.6s all;
}


.opçoes li:hover {
    border-color:#0077B6;
}


.opçoes li:hover h2 {
    font-size: 35px;
    color: #0077B6;
}


.opçoes li:hover p {
    color: #0077B6
}


.opçoes li:active {
    border-color: #00B4D8 ;
    transition: transform 1s
}


.opçoes li:active h2 {
    color: #00B4D8 ;
    font-size:  30px;
}

.opçoes li:active p {
    color: #00B4D8 ;
}


.opçoes h2 {
    font-weight: bold;
    font-family: Times New Roman;
    font-size: 30px;
    transition: 0.6s all;
}

.opçoes p {
    transition: 0.6s all;
}

.imagens_opçoes {
    width: 55%;
}


.frases_opçoes {
    font-size: 20px;
    font-family:  Cambria;
}


.autor_frases {
    font-family:  Cambria;
    font-weight: bold;
    margin-top:  6px;
}


footer {
    background: #D08C60;
    text-align: center;
    border: 2px solid #7F5539;
}


.rodape_img {
    width: 15%;
    display: inline-block;
    box-sizing: border-box;
}

.copyright_txt {
    font-size:  13px;
    margin: 5px;
}

main {
    width: 940px;
    margin: 0 auto;
}


form {
    margin: 34px;
}


form label, form legend{
    display: block;
    font-size: 18px;
    font-family: Cambria;
    margin: 24px 0 6px;
}

.input_padrao{
    display: block;
    padding: 15px 25px;
    width: 50%;
    margin: 0 0 10px;
}


.checkbox {
    margin: 2px 0 12px 0;
}

.submit {
    margin: 42px 0;
    padding: 15px;
    width: 40%;
    background: #D08C60;
    border: 2px solid #7F5539;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: Times New Roman;
    transition: 0.5s all;
    cursor: pointer;
}

.submit:hover {
    color: #0077B6;
    transform: scale(1.1);
}

.submit:active {
    color: #00B4D8;
    transform: scale(1.1);
}

table {
    margin: 40px 0 20px;
}

thead {
    background: #40888F;
    color: #ffffff;
    border: 1px solid #40888F;
}

th {
    font-size: 18px;
    font-weight: bold;
    font-family: Times New Roman;
    padding: 4px;
}

td {
    font-size: 14px;
    font-family: Cambria;
    padding: 20px 20px;
    border: 1px solid #40888F;
}

/*Home pag CSS*/

.banner {
    width: 100%;
}

.edit_titulo{
    text-align: center;
    font-size: 2em;
    margin: 1em 0 1em 0;
    font-family: Times New Roman;
}


.principal p {
    font-family: Cambria;
    font-size: 18px;
    margin: 0 0 1em 0;    
}


.principal strong {
    font-weight: bold;
}


.principal em {
    font-style: italic;
}


.mapa {
    padding: 3em 0;
}


.mapa p {
    font-family: Cambria;
    font-size: 18px;
    margin: 0 0 1em 0;
    text-align: center;    
}

.imagem_texto {
    width: 125px;
    float: left;
    margin: 3px 20px 10px 0;
}


.lista {
    padding: 3em 0;

}


.conteudo_lista {
    width: 640px;
    margin: 0 auto;
}


.lista_e_itens {
    width: 40%;
    display: inline-block;
    vertical-align: top;
}


.itens {
    font-family: Cambria;
    font-size: 18px;
    line-height: 1.5;
}


.itens:first-child {
    font-weight: bold;
}


.imagem_lista {
    width: 35%;
}


.video_edit {
    width: 560px;
    margin: 2em auto;
}

HTML

            <section class="lista">
                <h4 class="edit_titulo">Como ajudar?</h4>
                <div class="conteudo_lista">
                    <ul lista_e_itens>
                        <li class="itens">Divulgando o nosso trabalho.</li>
                        <li class="itens">Financiando os projetos com qualquer quantia.</li>
                        <li class="itens">Enviando feedbacks referentes aos artigos e a própria página.</li>
                        <li class="itens">Nos pedindo assunstos os quais gostaria de ler sobre.</li>
                        <li class="itens">Nos seguindo nas redes sociais.</li>
                        <li class="itens">Nos ajudando com artigos e interface se qualificado.</li>
                    </ul><img src="jose_patrocinio.jpg" class="imagem_lista">
                </div>
4 respostas

Olá, João.

Tudo bem?

Você pode utilizar o margin-left: ; para esquerda ou margin-right: ; para a direira dependendo de como você quer alinhar. Você quer alinhar ao centro ou com alguma referência tipo alinhar com a lista? Manda um print de como está por favor, fica mais fácil para te ajudar.

Fico aguardando. Valeu João.

Bom dia, Renan! Desde já, valeu por ajudar kkkkk. Então, gostaria de organizar a imagem ao lado direto do texto.

Print pag_home

solução!

Boa Tarde, João.

Tudo bem?

Tem um pequeno erro no seu HTML.

Ali na lista <ul> você declarou a classe CSS sem utilizar o atributo class=" " está assim: <ul lista_e_itens> teria que ser assim: <ul class="lista_e_itens">. Corrigindo isso a imagem já vai ficar ao lado da lista, pois o seu CSS já está certinho.

Espero ter ajudado. Valeu João.

Sempre um detalhe tosco passando por despercebido. Valeu pela ajuda e a atenção!