От куда эти отступы ? И как их убрать?

189

05 февраля 2020, 04:20

Только учусь верстать сайты, во время работы столкнулся с таком проблемой как отступы по бокам. Не могу их убрать, да и вообще не знаю от куда они взялись. Вот мой html код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Project one</title>
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
    <!-- Норма. шрифта -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
    <!-- Собствен. стили -->
    <link rel="stylesheet" href="css/main.css">
    <!-- Шрифты -->
    <link href="https://fonts.googleapis.com/css?family=Bungee|Francois+One|Oswald:400,700|Ropa+Sans" rel="stylesheet">
    <link rel="shortcut icon" href="Images/favocin.png">
     <!-- Required meta tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
  <body>
   <header>   
       <div class="head1">
            <div class="head_logo">NeuralMC</div>
            <div class="head_title">IP: Neuralmc.ru</div> 
       </div>         
    </header>  
    <section>
        <div class="portfolio">
            <div class="container">
                <div class="col-md-12">
                <div class="title">
                    Our Servers
                </div>    
                    <div class="row">
                   <!--//Title 1 -->
                    <div class="section_you">   
                        <div class="colona">
                                <img src="images/minecraft-server-logo-template-03-by-andyhanne.jpg" width="350" height="350"> 
                        </div>
                            <div class="colona_one_head">
                                    <p>Mine</p> 
                            </div> 
                        <div class="colona_one_section">
                                <p>Мир, где Вам предстоит пройти путь от обычной палки и кожаной брони до алмазного меча, способного рубить врагов направо и налево.</p> 
                        </div>
                    </div>
                <!--//Title 2 -->
                    <div class="section_you"> 
                        <div class="colona">
                                <img src="images/ocinka.png" width="350" height="350"> 
                        </div>
                            <div class="colona_twо_head">
                                    <p>RootCraft</p> 
                            </div> 
                        <div class="colona_two_section">
                                <p>Мир, где Вам предстоит пройти путь от обычной палки и кожаной брони до алмазного меча, способного рубить врагов направо и налево.</p> 
                        </div>
                    </div>
               <!--//Title 3 -->
                    <div class="section_you"> 
                        <div class="colona">
                            <img src="images/minecraft-server-logo-template-12-by-andyhanne-600x600.jpg" width="350" height="350"> 
                        </div>
                            <div class="colona_three_head">
                                    <p>MLMCraft</p> 
                            </div>               
                        <div class="colona_three_section">
                                <p>Мир, где Вам предстоит пройти путь от обычной палки и кожаной брони до алмазного меча, способного рубитьврагов направо и налево.</p> 
                        </div>
                     </div>   
                </div>
            </div> 
        </div>
    </div>
</section>

      <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="js/jquery-3.4.0.min.js"></script>
    <script src="bootstrap.min.js"></script>
    </body>  
</html>

Вот мой css код:

    .head1 {
    font-family: 'Bungee', cursive;
    background-image: url(../images/Minecraft.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 80vh;
    color: #2D2E30;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.head_logo {
    font-size: 120px;
    margin-bottom: 50px;
    margin-top: -250px;
    color: #F0F8FF;
}
.head_title {
    font-family: 'Francois One', sans-serif;
    font-size: 40px;
    margin-bottom: 50px;
    color: #F0F8FF; 
    border: solid 4px #F0F8FF ;
    padding: 15px;
    width: 18%;    
}
.portfolio {
    background-image: url(../images/background.png);
    background-repeat: no-repeat;
    width: 1148px;
    margin-left: auto;
    margin-right: auto;

} 
.section_you {
    width: 350px;
    margin-left: auto;
    background: rgba( 249, 248, 249, 0.5);   
}

/*
font-family: 'Francois One', sans-serif;
font-family: 'Bungee', cursive;
font-family: 'Oswald', sans-serif;
font-family: 'Ropa Sans', sans-serif;
*/

Скрин с отступами:

ПОСЛЕДНИЕ ВОПРОСЫ

07:09
17:51

Как выбрать ноутбук для школьника
08:01
07:36

Что такое Grid Бот
07:00

Використання UGC контенту для соціальних мереж
21:22

Использование тестового аккаунта Google Analytics
20:00

Почему стоит покупать лицензионное ПО
20:14
07:41

Методы повышения посещаемости веб-сайта

Все вопросы

ТОП-10

Все популярные вопросы

Input type file js

При выборе определенного файла, содержимое тега input type="file" меняется на название этого файлаПодскажите, как с помощью JS(JQuery), заменить то, что...

194

HTML

Как добавить форму заказа на сайт?

Итак, есть сайт https://uds-loyaltyru/, на нем есть кнопка "Подробнее об инструментах для бизнеса" И есть сайт-зеркало, и на нем тоже есть эта кнопка, но она...

373

HTML