I can not leave the menu bar correctly

Navigation
1

Myhtml:

<!DOCTYPEhtml><html><head><metacharset="UTF-8">
<title>Ensintech</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">    
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style-mobile.css">

</head>

<body>
    <header>

        <div class="container">
            <div class="row">
                <nav id="menu">
                    <ul>
                        <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                        <li><a class="aluno" href="#">Área do Aluno</a></li>
                    </ul>
                </nav>
            </div>
        </div>  
        <img id="logotipo" src="img/ensintech.png" alt="Logotipo">

    </header>

    <div class="container">
        <div class="intro">
            <img src="img/Egrande.png" id="centro">
            <p id="acesso" style="font-size:32px">
                Acesso Aluno
            </p>
            <p id="subtitulo">
                Digite seus dados de login para acessar o sistema
            </p>
            <form action="act_login.cfm" method="post" target="escondido">
                <div class="form-group">
                    <input type="email" class="form-control " id="email" placeholder="E-mail">
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" id="password" placeholder="Senha">
                </div>
            </form>
            <button id="entrar" type="submit" class="form-control">Entrar </button>
        </div>
    </div>
    <center><p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p></center>
    <div id="rodape"></div>

    <script src="lib/jquery/jquery.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

My normal css: 

html{
    font-family: sans-serif;    
}

header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}

 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(../img/Testing-banner2.jpg) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
#centro {
    position:absolute;
    top:18%;
    left: 50%;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
div .intro{
    margin-left: 494px;
    margin-top: 258px;
}
.container p {
    text-align:center;
    margin-left: -378px;
    color:#fff;
    font-weight: bold;
}
form {
    width:29%;
    margin-left: -51px;
}
.form-control {
    width: 94%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    }
#entrar {
    font-size:18px;
    width: 368px;
    margin-left: -50px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
}
#email {
    width:368px;
    border-radius:0;    
}
#password {
    width:368px;
    border-radius:0;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    margin-left: 115px;
    margin-top: 40px;
}
#subtitulo {
    font-weight:normal;

}

My css mobile: 

@media only screen and (max-width: 480px)/*smartphone*/{


*{
    box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
body{
    background-image:url(../img/Testing-banner2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height:121px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
header #logotipo {
    /*margin-left: 111px;*/
    text-align:center;
    display:none;
    margin-top: -95px;
    position: absolute;
}
.row {
    margin-right: -3px;
    margin-left: -15px;
}
#centro {
    position: absolute;
    top: 25%;
    left: 35%;
}
#menu ul{
    width: 100%;
    padding: 12px;
    margin-left: 12px;
    margin-top: 15px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display:block;
    text-decoration: none;
    background: #693;
}
a.adm{
    margin-bottom: 11px;
    margin-top: -9px;
    margin-left: 72px;
}
a.aluno{
    margin-bottom: 11px;
    margin-top: 22px;
    margin-left: 130px;
}
#acesso {

    margin-top:-130px;

}
.container p {
    text-align: center;
    margin-left: -595px;
    color: #fff;
    font-weight: bold;
}
form {
    margin-left:-450px;
}
#email {
    width: 300px;
    border-radius: 0;
}
#password {
    width: 300px;
    border-radius: 0;
}
#entrar{
    width: 300px;
    margin-left: -450px;
}
p.copyright {
    color: #666;
    margin-left: 6px;
    margin-top: 22px;
}

}

    
asked by anonymous 16.01.2018 / 12:40

1 answer

1

Your main issue is in this CSS: 

div .intro{
    margin-left: 494px;
    margin-top: 258px;
}

But when you remove it, your Form will be misaligned and you will need to use another class to align it again.

If you remove margin-left: 494px; your bar will work. But from what I saw in your CSS there are many other points the better. These margin-left that you use to align the elements is not the best option, Study a little about FlexBox that will help you SO MUCH! link

With this you will clean the Bar, but it will take more work to realign the items of the Form, this is because you used this margins. Your code needs a lot of work to improve, but it's not impossible. Start from top to bottom and align with Text-Aline and Margin: 0 auto; So you do not need FlexBox and you'll get a reasonable result.

Follow the Snippet in a "Final" result, I suggest you check all the code. Not every class needs to repeat within @media! Learn about it too! (can test on different screen sizes) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <style>

html{
    font-family: sans-serif;    
}

header{
    width:100%;
    height:58px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}

 header #logotipo{
    margin-left: 50px;
    margin-top: -50px;
    position:absolute; 
 }
body{
    display: block;
    width: 100vw;
    height: 100vh;
    background:url(http://placecage.com/600/600) no-repeat;
    background-size:cover;
    background-attachment: fixed;   
    font-size:16px;
    overflow-x:hidden;
    margin:0;
    padding:0;  
}
#centro {
    position:absolute;
    top:18%;
    left: 50%;
}
nav#menu {
    display:inline;
}
#menu ul {
    padding:12px;
    margin-left: 240px;
    background-color:#693;
    list-style:none;
    position:relative; 
}
#menu ul li { 
    display: inline; 
}
#menu ul li a {
    color:#fff;
    padding: 2px 10px;
    display: inline-block;
    text-decoration: none;
    background:#693; 
}   
#menu  li a:hover { 
   background-color:#487F1E;   
}
header #logotipo:hover {
     background-color:#487F1E;
}
#entrar:hover{
    background-color:#487F1E;
    border-bottom: 4px solid #2c4d12;
}
div .intro{
    /* margin-left: 494px; */
    margin-top: 258px;
}
.container p {
    text-align:center;
    color:#fff;
    font-weight: bold;
}
form {

}
.form-control {
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    }
#entrar {
    font-size:18px;
    width: 368px;
    height: 42px;
    border-radius: 0;
    border-bottom: 4px solid #487f1e;
    background-color: #693;
    color: #fff;
    margin: 0 auto;
}
#email {
    width:368px;
    border-radius:0;   
    margin: 0 auto; 
}
#password {
    width:368px;
    border-radius:0;
    margin: 0 auto;
}
#rodape {
    margin-top: 250px;  
}
p.copyright{
    color:#666;
    margin-left: 115px;
    margin-top: 40px;
}
#subtitulo {
    font-weight:normal;

}

@media only screen and (max-width: 480px)/*smartphone*/{


*{
    box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
font-family: Arial, Tahoma, sans-serif;
}
body{
    background-image:url(http://placecage.com/500/500);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
header{
    width:100%;
    height:121px;
    background-color: #693;
    border-bottom: 6px solid #487f1e; 
}
header #logotipo {
    /*margin-left: 111px;*/
    text-align:center;
    display:none;
    margin-top: -95px;
    position: absolute;
}
.row {
    margin-right: -3px;
    margin-left: -15px;
}
#centro {
    position: absolute;
    top: 25%;
    left: 35%;
}
#menu ul{
    width: 100%;
    padding: 12px;
    margin-left: 12px;
    margin-top: 15px;
    background-color: #693;
    list-style: none;
    position: relative;
}
#menu ul li a {
    color: #fff;
    padding: 2px 10px;
    display:block;
    text-decoration: none;
    background: #693;
}
a.adm{
    margin-bottom: 11px;
    margin-top: -9px;
    margin-left: 72px;
}
a.aluno{
    margin-bottom: 11px;
    margin-top: 22px;
    margin-left: 130px;
}
#acesso {

    margin-top:-130px;

}
.container p {
    text-align: center;
    color: #fff;
    font-weight: bold;
}

p.copyright {
    color: #666;
    margin-left: 6px;
    margin-top: 22px;
}

#entrar {
    width: 80%;
}
#email {
    width:80%;
}
#password {
    width:80%;
}

}

</style>
</head>
<body>
    
    
        <header>

                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                        <nav id="menu">
                            <ul>
                                <li><a class="adm" placeholder href="#">Área administrativa / Docente</a></li>
                                <li><a class="aluno" href="#">Área do Aluno</a></li>
                            </ul>
                        </nav>
                    </div>
                    </div>
                </div>  
                <img id="logotipo" src="img/ensintech.png" alt="Logotipo">
        
            </header>
        
            <div class="container">
                <div class="intro">
                    <img src="img/Egrande.png" id="centro">
                    <p id="acesso" style="font-size:32px">
                        Acesso Aluno
                    </p>
                    <p id="subtitulo">
                        Digite seus dados de login para acessar o sistema
                    </p>
                    <form action="act_login.cfm" method="post" target="escondido">
                        <div class="form-group">
                            <input type="email" class="form-control " id="email" placeholder="E-mail">
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" id="password" placeholder="Senha">
                        </div>
                    </form>
                    <button id="entrar" type="submit" class="form-control">Entrar </button>
                </div>
            </div>
            <center><p class="copyright">&copy; 2018 - Ensintech - Todos os direitos reservados</p></center>
            <div id="rodape"></div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
    
16.01.2018 / 18:31
Image rendering problem Lock typing TextBox field with CalendarExtender