0
我已经完成了我的网站的创建，但有一些问题我似乎无法弄清楚。我的网页右侧的额外空间
最主要的是由于某种原因，在右侧有空的空间。我正在努力实现'流畅'的布局。我已将宽度设置为100％。我无法弄清楚发生了什么事。
我想知道是否有人可以帮助我。
此外，我有一个大显示器，所以底部有空白。如果有人可以帮助我，这将是一个奖金。
谢谢。
HTML
<body>
<div class="container">
<header>
<a href="http://www.courdec.co.uk"><img src="images/courdec-logo.png"></a>
<div class="telephone">
<img src="images/telephone-number.png" />
</div>
</header>
<nav>
<div>
<h2><a href="index.php">Home</a></h2>
</div>
<div>
<h2><a href="services.php">Services</a></h2>
</div>
<div>
<h2><a href="gallery.php">Gallery</a></h2>
</div>
<div>
<h2><a href="contact.php">Contact</a></h2>
</div>
</nav>
<main>
<h1>Services</h1>
<img id="services-image" src="images/image5501.jpg" />
<div class="service-content">
<p>Courdec provides a range of commercial and residential painting and decorating services.</p>
<p>Projects ranging from large commercial premises to New Build.</p>
<table id="service-table">
<tr>
<th>Resin Floors</th>
<th>Intumescent Coatings</th>
<th>Hygiene Coatings</th>
</tr>
<tr>
<td>Retail, industrial and commercial projects</td>
<td>Protecting Wood and Steel from fire</td>
<td>Hospitals, Schools and food preparation areas</td>
</tr>
<tr>
<th>Spray Application</th>
<th>Wall coverings</th>
<th>Floor Markings</th>
</tr>
<tr>
<td>Covering large areas with a wide range of coatings</td>
<td>Vinyls, fabrics, silks and hand-printed papers</td>
<td>Directional systems, bays and walkways in car parks</td>
</tr>
</table>
<p>Our teams of professional painters and decorators work on all kinds of projects for a wide variety of commercial and private clients.</p>
<p>Efficient, organised and reliable, we meet all the Health & Safety requirements. We also like to protect the environment, using eco friendly paints.</p>
</div>
</main>
<footer>
<div>© <?php echo date('Y'); ?> Courdec UK Ltd.</div>
</footer>
</div>
</body>
CSS右侧
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:600|Overpass|Poppins:700|Titillium+Web|Varela+Round|Work+Sans|Titillium+Web:700');
body {
margin: 0;
background-color: rgb(254, 254, 254);
}
.container {
margin: 0;
width: 100%;
}
header {
width: 100%;
padding-top: 15px;
padding-left: 15px;
}
.telephone {
/*width: 100%;*/
float: right;
padding-right: 20px;
}
.telephone > h3 {
font-family: 'Overpass', sans-serif;
font-size: 20px;
}
nav {
width: 100%;
background-color: rgb(3, 3, 247);
text-align: center;
}
nav > div {
display: inline-block;
padding: 0px 65px;
}
nav > div:hover {
background-color: rgb(77, 117, 222);
}
nav > div > h2 {
font-family: 'Fira Sans', sans-serif;
font-size: 22px;
}
h2 > a {
text-decoration: none;
color: rgb(225, 230, 243);
}
main {
width: 100%;
}
h1 {
width: 100%;
margin: 0;
text-align: center;
font-family: "Work Sans ExtraBold", sans-serif;
font-size: 4em;
}
p {
font-family: "Titillium Web", sans-serif;
font-size: 17px;
}
#slides {
display: none;
}
.home-content {
padding: 0 2.5em 1em 2.5em;
text-align: justify;
}
.service-content {
text-align: center;
}
.service-content > #service-table {
width: 100%;
padding-bottom: 30px;
}
#service-table th {
font-family: "Titillium Web", sans-serif;
font-size: 24px;
}
#service-table td {
font-family: "Titillium Web", sans-serif;
font-size: 17px;
}
.building-types {
display: table;
width: 100%;
background-color: rgb(251, 217, 29);
font-family: "Poppins", sans-serif;
color: rgb(59, 77, 90);
}
.building-types > div {
display: table-cell;
vertical-align: middle;
width: 19%;
display: inline-block;
text-align: center;
}
.has-gallery main {
height: 1000px;
}
/* List of Albums */
#album-2 {
display: none;
}
/* -------------- */
#gallery-thumbnails {
margin: 0 auto;
width: 50%;
}
#gallery-thumbnails td {
width: 33%;
cursor: pointer;
text-align: center;
font-family: "Poppins", sans-serif;
font-size: 18px;
}
#gallery-thumbnails img {
width: 100%;
height: 185px;
}
.contact-content {
margin: 0 auto;
width: 50%;
text-align: center;
}
#contact-form {
margin: 0 auto;
width: 80%;
text-align: left;
}
input[type="text"], input[type="email"]{
border: 2px solid black;
width: 100%;
height: 25px;
padding-left: 8px;
font-family: Arial;
font-size: 15px;
border-radius: 5px;
}
textarea {
border: 2px solid black;
width: 100%;
height: 12em;
padding-top: 5px;
padding-left: 8px;
font-family: Arial;
font-size: 15px;
border-radius: 5px;
resize: none;
}
input[type="button"] {
padding: 10px 20px;
border: 1px solid #3366FF;
background-color:#B3C6FF;
font-family: "Work Sans ExtraBold", sans-serif;
font-size: 18px;
}
label {
font-family: "Titillium Web", sans-serif;
}
.certification {
padding-top: 2em;
}
#chas {
width: 125px;
height: 100px;
}
#dulux {
width: 200px;
height: 50px;
}
#services-image {
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
footer {
width: 100%;
background-color: rgb(30, 30, 30);
border-top: solid 10px rgb(209, 212, 218);
color: rgb(248, 248, 253);
}
footer > div {
width: 100%;
text-align: center;
font-family: 'Varela Round', sans-serif;
font-size: 24pt;
}
