make a header full screen width css

Question

I am trying to extend my header to cover the full page  http   dev webgrowth biz  and I want it look like this one http   www webgrowth biz  I have been trying everything for hours now  any help would be highly appreciated

User · Answer

Remove the max-width from the body  and put it to the  container   So  instead of   body       max-width 1250px      You should have    container       max-width 1250px

User · Answer

Live Demo  You can achieve the effect using a container element  then just set the containing elements margin to 0 auto and it will be centered   Markup    lt div id  header  gt       lt div id  headerContent  gt          Header text      lt  div gt   lt  div gt    CSS   header      width 100        background  url yourimage      headerContent      margin  0 auto  width  960px

User · Answer

header   margin  0  padding  0  width  100   background  xxxx      header  content   margin  0px auto  width  800px     or whatever        lt div id  header  gt   lt div id  content  gt  stuff here  lt  div gt   lt  div gt

User · Answer

Set the max-width 1250px  that is currently on your body on your  container  This way your header will be 100  of his parent  body

User · Answer

set the body max-width 110   and the make the width on the header 110  it will leave a small margin on left that you can fiX with margin-left  -8px  margin-top  -10px

User · Answer

Just set the header width to be 100vw to make it full screen width  and set the header height to be 100vh to make it full screen height

User · Answer

html    lt  DOCTYPE html gt   lt html gt   lt head gt   lt link rel  stylesheet  type  text css  href  style css   lt  head gt   lt body gt   lt ul class  menu  gt       lt li gt  lt a href     gt My Dashboard lt  a gt           lt ul gt               lt li gt  lt a href     class  learn  gt Learn lt  a gt  lt  li gt               lt li gt  lt a href     class  teach  gt Teach lt  a gt  lt  li gt               lt li gt  lt a href     class  Mylibrary  gt My Library lt  a gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt  lt a href     gt Likes lt  a gt           lt ul gt               lt li gt  lt a href     class  Pics  gt Pictures lt  a gt  lt  li gt               lt li gt  lt a href     class  audio  gt Audio lt  a gt  lt  li gt               lt li gt  lt a href     class  Videos  gt Videos lt  a gt  lt  li gt           lt  ul gt   lt  li gt       lt li gt  lt a href     gt Views lt  a gt           lt ul gt               lt li gt  lt a href     class  documents  gt Documents lt  a gt  lt  li gt               lt li gt  lt a href     class  messages  gt Messages lt  a gt  lt  li gt               lt li gt  lt a href     class  signout  gt Videos lt  a gt  lt  li gt           lt  ul gt       lt  li gt           lt li gt  lt a href     gt account lt  a gt           lt ul gt               lt li gt  lt a href     class  SI  gt Sign In lt  a gt  lt  li gt               lt li gt  lt a href     class  Reg  gt Register lt  a gt  lt  li gt               lt li gt  lt a href     class  Deactivate  gt Deactivate lt  a gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt  lt a href     gt Uploads lt  a gt           lt ul gt               lt li gt  lt a href     class  Pics  gt Pictures lt  a gt  lt  li gt               lt li gt  lt a href     class  audio  gt Audio lt  a gt  lt  li gt               lt li gt  lt a href     class  Videos  gt Videos lt  a gt  lt  li gt           lt  ul gt       lt  li gt       lt li gt  lt a href     gt Videos lt  a gt       lt ul gt               lt li gt  lt a href     class  Add  gt Add lt  a gt  lt  li gt               lt li gt  lt a href     class  delete  gt Delete lt  a gt  lt  li gt       lt  ul gt       lt  li gt       lt li gt  lt a href     gt Documents lt  a gt       lt ul gt               lt li gt  lt a href     class  Add  gt Upload lt  a gt  lt  li gt               lt li gt  lt a href     class  delete  gt Download lt  a gt  lt  li gt       lt  ul gt       lt  li gt   lt  ul gt   lt  body gt   lt  html gt    css    menu   menu ul   menu li   menu a       margin  0      padding  0      border  none      outline  none    body      max-width 110       margin-left 0     menu       height  40px      width 110       margin-left -4px      margin-top -10px       background   4c4e5a      background  -webkit-linear-gradient top   4c4e5a 0   2c2d33 100        background  -moz-linear-gradient top   4c4e5a 0   2c2d33 100        background  -o-linear-gradient top   4c4e5a 0   2c2d33 100        background  -ms-linear-gradient top   4c4e5a 0   2c2d33 100        background  linear-gradient top   4c4e5a 0   2c2d33 100         -webkit-border-radius  5px      -moz-border-radius  5px      border-radius  5px     menu li       position  relative      list-style  none      float  left      display  block      height  40px     menu li a       display  block      padding  0 14px      margin  6px 0      line-height  28px      text-decoration  none       border-left  1px solid  393942      border-right  1px solid  4f5058       font-family  Helvetica  Arial  sans-serif      font-weight  bold      font-size  13px       color   f3f3f3      text-shadow  1px 1px 1px rgba 0 0 0  6        -webkit-transition  color  2s ease-in-out      -moz-transition  color  2s ease-in-out      -o-transition  color  2s ease-in-out      -ms-transition  color  2s ease-in-out      transition  color  2s ease-in-out      menu li first-child a   border-left  none     menu li last-child a  border-right  none      menu li hover  gt  a   color   8fde62     menu ul       position  absolute      top  40px      left  0       opacity  0      background   1f2024       -webkit-border-radius  0 0 5px 5px      -moz-border-radius  0 0 5px 5px      border-radius  0 0 5px 5px       -webkit-transition  opacity  25s ease  1s      -moz-transition  opacity  25s ease  1s      -o-transition  opacity  25s ease  1s      -ms-transition  opacity  25s ease  1s      transition  opacity  25s ease  1s      menu li hover  gt  ul   opacity  1      menu ul li       height  0      overflow  hidden      padding  0       -webkit-transition  height  25s ease  1s      -moz-transition  height  25s ease  1s      -o-transition  height  25s ease  1s      -ms-transition  height  25s ease  1s      transition  height  25s ease  1s      menu li hover  gt  ul li       height  36px      overflow  visible      padding  0      menu ul li a       width  100px      padding  4px 0 4px 40px      margin  0       border  none      border-bottom  1px solid  353539      menu ul li last-child a   border  none      demo here  try also resizing the browser tab to see it in action

User · Answer

The best way to make the header full screen is set height to be 100vh   header  height  100vh

User · Answer

min-height  100   position  relative

[css] make a header full screen (width) css

Examples related to css