css Não consigo retirar a margin do background-color da minha div!!!

[xandedd 0]

Criei um login modal em minha page, e estou com problemas na minha (div #container), onde criei um background color com (width: 100% e height: 100%),  e não consigo eliminar as margins, ja tentei de tudo, (margin: 0  ,  padding: 0  ,  top:0  ,  left:0)    e até mesmo tentei colocar margin:0 nos elementos html e no body e nâo tive resultado,  exemplos =  *{margin: 0;} html,body {margin:0;} , e em ultima tentativa tentei usar o (!important;) mesmo assim sem resultado, preciso muito de ajuda, desde já agradeço

html,body {
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;

}

*, *::after, *::before {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#container {
height: 100%;
align-content: center;
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 1300 !important;
}

#container:target{
  display: block;
}

.card-header h3 {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1rem;
  margin-bottom: 5px;
}

.card{
height: 370px;
margin-top: auto;
margin-bottom: auto;

width: 400px;
background-color: #fff !important;
animation: slideUp 0.3s ease-in-out;
}

@keyframes slideUp {
  from{
    opacity: 0;
    bottom: -200px;
  }
  to {
    opacity: 1;
    bottom: 0;
  }
}

.social_icon .tw{
font-size: 60px;
margin-left: 10px;
color: rgba(120,205,240,0.8);
}

.social_icon .fb{
font-size: 60px;
margin-left: 10px;
color:  #6d84b4;
}

.social_icon .gm{
font-size: 60px;
margin-left: 10px;
color: #df4b37;
}


.social_icon span:hover{
color: #495057;
cursor: pointer;
}

.card-header h3{
color: #bf8b28;
}

.social_icon{
position: absolute;
right: 20px;
top: -45px;
}

.input-group-prepend span{
width: 38px;
background-color: #bf8b28;
color: #fff;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: #495057;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: #fff;
background-color: #bf8b28;
width: 100px;
}

.login_btn:hover{
color: #fff;
background-color: #6c757d;
}

.links {
color: #495057;
}

.links a {
margin-left: 4px;
}

a {
 text-decoration: none;
 color: #309ca7;
}
a:hover {
 text-decoration: none;
 color:#20eaff;
}

<div id="container"class="container">
    	<div class="d-flex justify-content-center h-100">
    		<div class="card">
    			<div class="card-header">
    				<h3>Log In</h3>
    				<div class="d-flex justify-content-end social_icon">
    					<span class="fb"><i class="fab fa-facebook-square"></i></span>
    					<span class="gm"><i class="fab fa-google-plus-square"></i></span>
    					<span class="tw"><i class="fab fa-twitter-square"></i></span>
    				</div>
            <a href="#" class="close">&times</a>
    			</div>
    			<div class="card-body">
    				<form>
    					<div class="input-group form-group">
    						<div class="input-group-prepend">
    							<span class="input-group-text"><i class="fas fa-user"></i></span>
    						</div>
    						<input type="text" class="form-control" placeholder="Usuário">

    					</div>
    					<div class="input-group form-group">
    						<div class="input-group-prepend">
    							<span class="input-group-text"><i class="fas fa-key"></i></span>
    						</div>
    						<input type="password" class="form-control" placeholder="Senha">
    					</div>
    					<div class="row align-items-center remember">
    						<input type="checkbox">Lembrar-me
    					</div>
    					<div class="form-group">
    						<input type="submit" value="Login" class="btn float-right login_btn">
    					</div>
    				</form>
    			</div>
    			<div class="card-footer">
    				<div class="d-flex justify-content-center links">
    					Não é cadastrado?<a href="#">Cadastre Se</a>
    				</div>
    				<div class="d-flex justify-content-center">
    					<a href="#">Esqueceu sua senha?</a>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

 

[wanderval 19]

Pelo que vi você está utilizando o bootstrap e pelo seu código interpretei a classe ".container" como sento a classe do container do modal e não da pagina, se for isso é simples:

 

-quando se usa a classe '.container' o bootstrap limita o tamanho do layout em 960px como você pode ver que é a sua tela se você quer preencher toda a tela deve usar a classe '.container-fluid'

 

// html original
<div id="container" class="container">
  
// html modificado
<div id="container" class="container-fluid">

 

ex: https://jsbin.com/xohudewita/1/edit?html,css,output

 

link de referência: https://getbootstrap.com/docs/4.1/layout/overview/

[xandedd 0]

2 horas atrás, wanderval disse:

Pelo que vi você está utilizando o bootstrap e pelo seu código interpretei a classe ".container" como sento a classe do container do modal e não da pagina, se for isso é simples:

 

-quando se usa a classe '.container' o bootstrap limita o tamanho do layout em 960px como você pode ver que é a sua tela se você quer preencher toda a tela deve usar a classe '.container-fluid'

 

// html original
<div id="container" class="container">
  
// html modificado
<div id="container" class="container-fluid">

 

ex: https://jsbin.com/xohudewita/1/edit?html,css,output

 

link de referência: https://getbootstrap.com/docs/4.1/layout/overview/

Obrigado amigo, era esse mesmo o problema deu tudo certo! Abraçooo