Div'ы ложаться друг на друга.

Здравствуйте, я столкнулся с такой проблемой, что блоки на странице фильмы ложатся друг на друга, и меню не поддаётся стилям. Весь текст смешивается, и сама страница выглядит не как в видео, хотя кот правильный. Помогите пожалуйста. file:///C:/Users/Public/Pictures/%D0%BF%D1%8B%D0%BF.pgn.jpg

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
  
  .header {
    background-color: #257965;
    min-width: 100%;
    height:  20%;
    text-align: center;
  }

  .logo {
    width: 100%;
  }

  .site_content {
    width: 100%;
  }

  .menubar {
    width: 100%;
    height: 100%;
  }

  .content {
    width: 100%;
    text-align: center;
  }

  .site_content {
    width: 100%;
    text-align: center;
  }

  .sidebar_container {
    display: none;
  }

  .footer {
    display: none;
  }

  ul.menu {
    float: none;
  }

  ul.menu li {
    margin: 0;
    padding: 0;
    float: none;
  }

  .logo h1 {
    font: normal 235% 'century gothic', arial, sans-serif;
  }

  .logo h2 {
    font: normal 100% 'century gothic', arial, sans-serif;
    color: white;
  }

  .content h1, h2 {
    font: normal 110% 'century gothic', arial;
  }

  .films_block img {
    width: 43%;
  }

  .posts_content p {
    line-height: 1.5em;
    padding: 3%;
    text-align: left;
  }

  .posts p {
     font-size: 120%;
  }

  /* fims page */
  .info_film {
    float:none;
    height: 100%;
  }

  .info_film img {
    width: 90%;
    margin-bottom: 5%;
  }

  button {
    float: none;
  }
  

}