Question

我已经完成了我的网站创建，但有几个问题我似乎无法弄清楚。

主要原因是由于某种原因，右侧有空的空间。我试图获得一种“流畅”的感觉。布局。我将宽度设置为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>&copy; <?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;
}

Answer 1

右边的空格是由此

引起的

header {
    width: 100%;
    padding-top: 15px;
    /* padding-left: 15px; */
}

只需删除padding-left即可。

如果要将页脚放在底部，请使用flexbox或绝对定位。这是对flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

的一个很好的解释

Answer 2

将来，您可以打开您的网页，按住Ctrl + Shift + i，然后沿着文档树向下移动到有问题的元素。将鼠标悬停在它上面，它将显示该元素的位置以及它是否负责空格。一旦你找到负责任的元素，然后转到同心正方形（中间右边）并找出是否需要减少元素的边距或边框或填充。

我网页右侧的额外空间

2 个答案: