Bootstrap класс контейнера не работает на Chrome

У меня есть несколько проблем с браузером Google Chrome и Bootstrap.

  1. У меня есть контейнер внутри одного из моих разделов HTML, который
    центрирование контента в каждом браузере, кроме Google Chrome.
  2. Кажется, что он ведет себя так, как будто это контейнер-жидкость, потому что
    он не охватывает 100% окна viewport, он, кажется, имеет
    около 5px поля на левой и правой стороне. Опять же, только в
    Хром.

Вот мой код для этого раздела:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hD djZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,300italic,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<section id="aboutUs">
    <div class ="groupImg">
            <div class="container">
                <h1>About Us</h1>
                <p class = "motto col-md-12"><i>
                    “As a multicultural dance company, C.O.D.A. prides itself in the versatility of dance styles and creative ideas within the company. Understanding the authenticity and history of Hip Hop, we embrace all styles including street, footworking, house, breakdancing, popping, locking, tutting, freestyling, new school, old school and more. With dancers that come from both trained and untrained backgrounds, we can appreciate the possession of raw talent and acknowledge the importance of discipline and training. C.O.D.A. aims to share the common interest of Hip Hop to all people and to demonstrate a mutual understanding and respect for other dancers alike.”</i>
                </p>
            </div>
    </div>
</section>
</body>
</html>

стиль CSS:

#aboutUs h1 {
    color:white;
    font-size:40px;
    padding: 40px 0px 20px 0px;
    text-align: center; 
    text-transform: uppercase;

}

.motto{
    color:white;
    font-size:20px;
    font-weight: 300;
    line-height: 2.0em;
    text-align: center;
}

.groupImg {
    background-image: url("img/5color_maroon.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    height: 750px;

}

Вот скриншоты в каждом браузере:

Вот как это выглядит в Chrome

Вот как это выглядит в Safari

Вот как это выглядит в Firefox

Разве я не связал его правильно или я что-то упускаю?
Спасибо!

1 ответ

  1. Пожалуйста замените вашу справку CDN, с настоящим кодом CDN. вы можете использовать <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">его работу. или может быть вашим главным.css имеет любую ошибку.