Поместите родительский div вокруг всей веб-страницы

Я пытаюсь поставить черную рамку вокруг всей моей веб-страницы.

Я хотел бы, чтобы родительский div был вокруг всей страницы, а не только снизу. Мой HTML выглядит так:

<body>
<!-- Header --> 
        <section id = "top" class = "top">
            <div class="container">
                <h1 class = text-center>Sarah Hynds</h1>
            </div>
        </section>
        <!------ tabs ------>
        <nav class="mynav">
            <ul>
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="">Resume</a>
                </li>
                <li>
                    <a href="">Projects</a>
                </li>
                <li>
                    <a href="">Interests</a>
                </li>
                <li>
                    <a href="">Contact</a>
                </li>
            </ul>
        </nav>
        <hr id="separator" width="35%" color="black">
        <div class="floating-box" id="about"></div>
        <div class=floating-box" id="profile">
        </div>
        <div class="parentDiv"></div>
</body>

Мой CSS выглядит так:

.parentDiv { 
width: 90%; 
border: 1px solid #000000; 
margin-top: 5%; 
margin-left: 5%; 
margin-right: 5%; 
height: 100%; 
display: inline-block; 
padding-bottom: 50px;
display: inline-block;
white-space: nowrap; }

Как я могу поставить рамку вокруг всей страницы? Спасибо!

Источник

1 ответ

Решение
<body>
<div class="parentDiv">
<!-- Header --> 
        <section id = "top" class = "top">
            <div class="container">
                <h1 class = text-center>Sarah Hynds</h1>
            </div>
        </section>
        <!------ tabs ------>
        <nav class="mynav">
            <ul>
                <li>
                    <a href="">About</a>
                </li>
                <li>
                    <a href="">Resume</a>
                </li>
                <li>
                    <a href="">Projects</a>
                </li>
                <li>
                    <a href="">Interests</a>
                </li>
                <li>
                    <a href="">Contact</a>
                </li>
            </ul>
        </nav>
        <hr id="separator" width="35%" color="black">
        <div class="floating-box" id="about"></div>
        <div class=floating-box" id="profile">
        </div>

</div>
</body>
</html>

Просто оберните его вокруг содержимого, на которое вы хотите повлиять.:-)

Источник
Другие вопросы по тегам