Tema: Header no ocupa toda la pantalla
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/09/2017, 09:02
kishama28
 
Fecha de Ingreso: mayo-2010
Mensajes: 3
Antigüedad: 14 años, 11 meses
Puntos: 0
Exclamación Header no ocupa toda la pantalla
Buenos días,

El header de mi pagina no logra ocupar toda la pantalla cuando a un div debajo de este header le hago un margin left para centrarlo. Les dejo la foto.

https://1drv.ms/i/s!AvolmdWqgSn-ge5XCVC2shb8GQ6mlQ

Mi codigo Header:
No lo puedo poner en codigo porque me sale un error:
Las etiquetas no pueden ser palabras demasiado comunes (div).
Se los dejo en imagen:
https://1drv.ms/i/s!AvolmdWqgSn-ge5YQFiDj7S5a4TwjA

Mi código CSS:

Código CSS: 
Ver original
  1. body {
  2.     margin: 0;
  3.     padding: 0;
  4.     font-family: Helvetica, Arial, sans-serif;
  5.     color: #666;
  6.     background: #E1ECFD; 
  7.     font-size: 1em;
  8.     line-height: 1.5em;
  9. }
  10.  
  11. #main-header {
  12.     background: #125061;
  13.     color: white;
  14.     height: 54px;
  15. display: block;
  16. overflow-x:auto;
  17. }   
  18. #main-header a {
  19.     color: white;
  20. }
  21.  
  22. /* Logo */
  23.  
  24. #titulo{
  25. float: left;
  26. padding: 4px 0 0 10px;
  27. font-size: 16px;
  28. font-weight: bold;
  29. text-shadow: 1.5px 1.5px 1.5px #000;
  30. }
  31.  
  32. #logo{
  33. padding: 12px 0 0 40px;
  34. }
  35.  
  36. #imagen{
  37. float:left;
  38. width: 28px;
  39.     
  40. }
  41.  
  42. .nav-menu{
  43.     background-color: #e3e3e3;
  44.     border: 2px solid #d8d8d8;
  45.     height: 30px;
  46.  
  47. }
  48.  
  49. .nav-menu ul {
  50.     list-style: none;
  51.     text-align: center;
  52.     padding: 0; 
  53.     margin: 0;
  54.     float: left;
  55.  
  56. }
  57. .nav-menu li {
  58.     font-family: 'Oswald', sans-serif;
  59.     font-size: 12px;
  60.     font-weight: bold;
  61.     line-height: 30px;
  62.     height: 30px;
  63.     display:inline-block;
  64. }
  65.  
  66. .nav-menu a {
  67.     text-decoration: none;
  68.     color: #000;
  69.     display: block;
  70.     transition: .3s background-color;
  71. }
  72.  
  73. .nav-menu a:hover {
  74.     background-color: #125061;
  75.     color:#fff;
  76. }
  77.  
  78. .nav-menu a.active {
  79.     background-color: #125061;
  80.     color: #fff;
  81.     cursor: default;
  82. }
  83.  
  84. @media screen and (min-width: 600px) {
  85.     .nav-menu li {
  86.         width: 120px;
  87.         border-bottom: none;
  88.         height: 30px;
  89.         line-height: 30px;
  90.         font-size: 0.8em;
  91.  
  92.     }
  93. }
  94.  
  95. .sec-left{
  96.     background-color: #fffbdd;
  97. }
  98.     
  99. .login{
  100.     background-color: #fff;
  101.     display:inline-block;
  102.     vertical-align:middle;
  103.     border: 2px solid #d8d8d8;
  104.     padding-left: 15px;
  105.     padding-right: 15px;
  106.     padding-bottom: 15px;
  107.     border-radius: 5px;
  108.     font-size: 13.66px;
  109.     font-weight: bold;
  110.     color: #000000;
  111.     margin: 100px 525px;
  112. }
  113.  
  114.  
  115. .form-control {
  116.   display: block;
  117.   width: 230px;
  118.   height: 20px;
  119.   padding: 6px 12px;
  120.   font-size: 14px;
  121.   line-height: 1.428571429;
  122.   color: #555555;
  123.   vertical-align: middle;
  124.   background-color: #ffffff;
  125.   border: 1px solid #cccccc;
  126.   border-radius: 4px;
  127.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  128.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  129.   -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  130.           transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  131. }
  132.  
  133.  
  134. .form-control:focus {
  135.   border-color: #66afe9;
  136.   outline: 0;
  137.   -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  138.           box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  139. }
  140.  
  141. .form-control[disabled],
  142. .form-control[readonly],
  143.  
  144. fieldset[disabled] .form-control {
  145.   cursor: not-allowed;
  146.   background-color: #eeeeee;
  147. }
  148.  
  149. textarea.form-control{
  150.   height: auto;
  151. }