我正在为老板准备一个简单的网站。我决定尝试使用引导程序，并选择了版本4。因此，我设计了一个相当不错的模板，并注意到主要内容的行超出了容器div的界限。这是页面上唯一执行此操作的行。我尝试用边距或两个元素中的任一个或两个填充来更改间距，但似乎没有任何改变。我还尝试将主要内容包含在section标记内，因为其他两行包含在header / footer标记内，并且它们仍在边界内。这也没有用。我可能在这里缺少明显的东西。谢谢您的帮助，不胜感激。
我突出显示了容器只是为了显示它的边界框。在此屏幕快照中，我也从其中删除了填充，但是无论哪种方式，它都是相同的问题。
<!doctype html>
<html lang="en">
<head>
<title>Air Technology West</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- fontawesome CDN embed -->
<script src="https://use.fontawesome.com/f13a1bd68c.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!-- Header area -->
<header class="pt-3 px-3">
<div class="row">
<div class="col-md-6">
<a href="#"><img class="logo" src="img/logo1.png"></a>
</div>
<div class="col-md-6">
<ul class="contact-info">
<li class="ph-local"><i class="fa fa-phone fa-fw"></i> xxx-xxx-xxxx</li>
<li class="ph-fax"><span class="fnt-sm">Fax: </span><i class="fa fa-fax …