0

Já pesquisei aqui pelo SOF mas os problemas que apareceram não se assemelhavam ao meu, portanto gostaria de saber oq eu fiz de errado aqui: inserir a descrição da imagem aqui

Quero saber como remover esse espaço entre as duas divs deixando elas lado a lado.

O código HTML :

body{
        background-color: #0E6BA8;
    
        
    }
    .container{
        display: grid;
        grid-template-columns: 300px  300px 300px 300px;
        grid-template-rows: 300px  300px 300px 300px;
        display: flex;
        flex-direction: column;
        
    }
    @media(min-width: 680px){
        .container{
            display: flex;
            flex-direction: row;   
        }
    }
    .caixas{
        background-color: #A6E1FA;
        width: 280px;
        height: 280px;
        text-align: center;
        border-radius: 10px;
        border: 3px solid #0A2472;
        margin: 0 auto;
    }
    .input{
        border-radius: 8px;
        padding:5px;
    }
 


    <html>
        <head>
            <link rel="stylesheet" href="style.css">
        </head>
    
        <body>
            <div class="container">
            <div class='caixas'>
                <h2>Estrutura sequencial</h2>
                <h3>calculadora de terreno</h3>
                Digite o primeiro valor:
                <br>
                <input type='text' name='valorum' class='input'>
                <br>
                Digite o segundo valor:
                <br>
                <input type='text' name='valordois' class='input'>
                <br>
                Resultado:
                <br>
                <input type='text' name='resultado' class='input'>
            </div>
            <div class='caixas'>
                <h2>Estrutura sequencial</h2>
                <h3>calculadora de terreno</h3>
                Digite o primeiro valor:
                <br>
                <input type='text' name='valorum' class='input'>
                <br>
                Digite o segundo valor:
                <br>
                <input type='text' name='valordois' class='input'>
                <br>
                Resultado:
                <br>
                <input type='text' name='resultado' class='input'>
            </div>
            
            </div>
    
            <script type="text/javascript" src="js.js"></script>
        </body>
    </html>


    

0

1 Resposta 1

1

Cara dentro do min-width basta vc remover esse margin: auto, e coloca justify-content: center no container flex.

inserir a descrição da imagem aqui

Exiba o código tb em Tela Cheia para ver o resultado

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="style.css">

<style>
  body {
    background-color: #0E6BA8;


  }

  .container {
    display: grid;
    grid-template-columns: 300px 300px 300px 300px;
    grid-template-rows: 300px 300px 300px 300px;
    display: flex;
    flex-direction: column;

  }

  .caixas {
    background-color: #A6E1FA;
    width: 280px;
    height: 280px;
    text-align: center;
    border-radius: 10px;
    border: 3px solid #0A2472;
    
    margin: 0 auto;
  }

  .input {
    border-radius: 8px;
    padding: 5px;
  }
  
    @media(min-width: 680px) {
    .container {
      display: flex;
      flex-direction: row;
      
      justify-content: center;
    }
    
    .caixas {
      margin: initial;
    }

  }
</style>
</head>

<body>
  <div class="container">
    <div class='caixas'>
      <h2>Estrutura sequencial</h2>
      <h3>calculadora de terreno</h3>
      Digite o primeiro valor:
      <br>
      <input type='text' name='valorum' class='input'>
      <br>
      Digite o segundo valor:
      <br>
      <input type='text' name='valordois' class='input'>
      <br>
      Resultado:
      <br>
      <input type='text' name='resultado' class='input'>
    </div>
    <div class='caixas'>
      <h2>Estrutura sequencial</h2>
      <h3>calculadora de terreno</h3>
      Digite o primeiro valor:
      <br>
      <input type='text' name='valorum' class='input'>
      <br>
      Digite o segundo valor:
      <br>
      <input type='text' name='valordois' class='input'>
      <br>
      Resultado:
      <br>
      <input type='text' name='resultado' class='input'>
    </div>

  </div>

  <script type="text/javascript" src="js.js"></script>
</body>

</html>

2
  • cara, de coração, MUITO OBRIGADO <3 10/08/2020 às 14:33
  • 1
    @DaniloCosta sem problemas meu caro, da uma estudada no ajuste que fiz, apesar de simples ajuda muito. 💪
    – hugocsl
    10/08/2020 às 14:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .