CSS Como tiro esse Scroll da tela e deixo responsiva?

[Mizrain Phelipe Sá]

Pessoal como faço para tirar esse Scroll que aparece quando abro essa página em telas menores? 

Gostaria de deixá-la responsiva tbem e com o card de login no meio da página com margin top e bottom mais sem criar scroll(barra de rolagem), se alguém poder me ajudar agradeço.

 

 

<style>
    body{
        margin:0;
        padding:0;
    }

    .body-custom {
        height: 100%;
    }

    .logincard {
        margin: auto;
        position: relative;
        max-width: 360px;                            
    }

    .loginlogo {
        text-align: center;
        padding: 30px 15px 10px;
        margin: 0;
    }

    .card-footer-p16 {
        padding-left: 20px;
        padding-right: 20px;
    }

    .pmd-textfield-focused {
        background-color: #001E80;
    }

</style>

<div class="container">
    <div class="logincard ">
        <div class="pmd-card pmd-z-depth">
            <div class="login-card">
                @using (Html.BeginForm("Login", "Acesso", FormMethod.Post))
                {
                    <div class="pmd-card-title text-center">
                        <h1 class="loginlogo">
                            <img src="/images/SSP.png" alt="Secretaria de Estado de Segurança Pública" class="img-responsive logo_login">
                        </h1>
                        <h3>
                            <strong>ANÁLISE CRIMINAL</strong>
                        </h3>
                    </div>

                    <div class="pmd-card-body">
                        @if (!string.IsNullOrWhiteSpace(ViewBag.errorMessage))
                        {
                            <div class="alert alert-warning" style="text-align:center;">@ViewBag.errorMessage</div>
                        }
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Usuario" class="control-label pmd-input-group-label">Usuário</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">perm_identity</i>
                                </div>
                                <input type="text" class="form-control" id="Usuario" name="Usuario"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                        <div class="form-group pmd-textfield pmd-textfield-floating-label">
                            <label for="Senha" class="control-label pmd-input-group-label">Senha</label>
                            <div class="input-group">
                                <div class="input-group-addon">
                                    <i class="material-icons md-dark pmd-sm">lock_outline</i>
                                </div>
                                <input type="password" class="form-control" id="Senha" name="Senha"><span class="pmd-textfield-focused"></span>
                            </div>
                        </div>
                    </div>

                    <div class="pmd-card-footer pmd-card-footer-no-border card-footer-p16 text-center">
                        <button type="submit" class="btn pmd-ripple-effect btn-primary btn-block">Login</button>
                    </div>
                }
            </div>
        </div>                
    </div>

    <footer class="text-center footer">
        <hr />
        <p>
            &copy; @DateTime.Now.Year - Secretaria de Estado de Segurança Pública - SSP/SMT - Subsecretaria de Modernização Tecnológica.<br />
            Versão: @ViewBag.versao
        </p>
    </footer>
</div>

 

[Public2004]

@Mizrain Phelipe Sá Boas jovem. Por padrão o Scroll do navegador vai aparecer caso o tamanho da página seja maior que a janela (altura), até dá pra ocultar, mas não seria prático na questão de usabilidade.

Para trabalhar com responsividade, pesquise por "media queries" que em resumo é como definir condicionais para tratar seu css de acordo com a resolução atual.

Quanto a outra dúvida, seria alinhar seu box de login tanto horizontalmente quanto verticalmente na tela, uma sugestão é utilizar para esse box, um container que ocupe 100% da tela (H/V) e defini-lo como "flex" mais as suas propriedades de alinhamento, veja exemplo abaixo:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw
}

Abs.