Thiết kế website giá rẻ

Question

To put it simply, i want my sidebar here to be 20% of the width of the page, while the article itself is 80%. Because of the padding in my different sections, the width is offset, meaning i have to lower the values to get it all to fit side by side.

Here is my HTML:

<head>
    <title>big balls</title>
    <link rel="stylesheet" href="styles.css" />
</head>

<body>
    <nav>
        <ul>
            <a href="http://www.github.com" target="_blank"><img class="icon" src="images/github.png" /></a>
            <a href="http://www.google.com" target="_blank"><img class="icon" src="images/google.png" /></a>
            <a href="https://en.wikipedia.org" target="_blank"><img class="icon" src="images/wikipedia.jpg"></a>
            <a href="https://gitlab.com" target="_blank"><img class="icon" src="images/gitlab.png" /></a>
        </ul>
    </nav>
    <section class="sidebar">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec urna massa, bibendum vel tellus non, temporus purus, a luctus enim facilisis quis. <u>Praesent consequat molestie</u> velit in interdum.
        </p>            viverra justo. Quisque vestibulum eleifend mauris, viverra facilisis odio ullamcorper quis. Pellentesque
            lobortis dolor ac ultrices malesuada. Pellentesque facilisis tincidunt iaculis. Fusce feugiat nunc metus.
            Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Etiam in sem nec mi
            porta ultrices eget at lectus. In sagittis eu est in interdum. Aliquam in massa ac lacus cursus viverra eget
            sit
            amet justo. Praesent eleifend, magna vitae aliquet egestas, purus risus convallis purus, non aliquet diam
            ipsum
            vitae dui. Vivamus mollis metus eu lectus malesuada, non tempor nulla accumsan. Aliquam erat volutpat.
            Vivamus
            convallis lac
    </section>

    <article>
        
        <p>
            Sed sollicitudin placerat quam, a semper massa pharetra a. Donec commodo malesuada neque, et congue orci
        </p>
        <p>
            Donec sit amet dignissim lorem. Ut at neque at ex blandit dapibus vel nec nisi. Mauris malesuada diam vitae
        </p>
        <p>
            <u>Suspendisse et fermentum metus, nec vulputate enim.</u> Aenean eu sem risus. Ut viverra porta est, at tincidunt
        </p>
        <p>
            Aliquam porta pharetra fermentum. Nulla pulvinar imperdiet interdum. Nulla placerat commodo blandit. Mauris
        </p>
        <p>
            Sed accumsan orci ante, ut auctor mi rhoncus eget. Aliquam a dolor pulvinar, malesuada enim quis, fringilla
            faucibus vulputate.
        </p>
        <p>
            Quisque ullamcorper mauris at lectus rhoncus, a auctor sem lobortis. Sed lectus sapien, vehicula quisest.
        </p>
        <p>
            Duis lobortis ex neque. Aenean maximus metus congue augue elementum, et commodo est mattis. Morbi
            augue libero, at scelerisque sem volutpat id.
        </p>
        <p>
            Nam vehicula mauris eu commodo imperdiet. Etiam turpis tortor, semper sed dolor ornare, rutrum tincidunt
        </p>
        <p>
            Vestibulum sed molestie ligula, vel ultricies arcu. Nullam dapibus neque rhoncus tellus pulvinar, vitae
            lacinia
        </p>
        <p>
            Curabitur condimentum nulla urna, a dictum magna egestas sit amet. Phasellus sapien lectus, suscipit at
        </p>
        <p>
            Mauris sed sapien vitae diam laoreet semper. Aenean porta fringilla magna non rhoncus. Curabitur vestibulum

        </p>
        <p>
            Nunc lacinia nec mi non malesuada. Vivamus suscipit non turpis ut hendrerit. Nunc at mauris viverra,

        </p>
    </article>
    <footer>
        <div class="footerbackground">
            <div class="footersection">
                <p>
                    bullshittery
                </p>
        ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    width: 80%;
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    width: 100%;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    width: 20%;
    background-color: #fdf6e3;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}   </div>
            <div class="footersection">
                <p>
                    more saosudsiod
                </p>
            </div>
        ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    width: calc(80% - 30px);
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    width: 100%;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    width: calc(20%);
    background-color: #fdf6e3;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}</div>     
    </footer>
</body>

And my CSS:

ul{
    background-color: #fdf6e3;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    margin: 0px;
}
article {
    float: left;
    width: calc(80% - 30px);
    padding: 5px;
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    box-sizing: border-box;
}
footer {
    margin: 10px;
    background-color: #fdf6e3;
    border-radius: 5px;
    clear: left;
    width: 100%;
}
a{
    color: #dc322f;
    padding-left: 5px;
    padding-right: 5px;
}
body{
    background-color: #eee8d5;
    color: #002b36;
    font-family: 'Times New Roman', 'Courier New' monospace
}
u{
    color: #d33682;
}
i {
    color: #d33682;
}

.icon {
    width: 48px;    margin-top: 10px;
    border-radius: 8px;
}
.sidebar {
    float: left;
    width: calc(20%);
    background-color: #fdf6e3;
    margin-top: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}
.footersection {
    float:left;
}
.footerbackground {
    background-color: #fdf6e3;
    border-radius: 5px;
    width: 100%;
}

I’m just learning HTML and CSS now, so apologies if the solution is fairly easy.

I have already tried changing box-sizing to border-box in the CSS to no luck. Changing the article’s width to something like 78% works, but it is not aligned well to the rest of the webpage.

Thiết kế website giá rẻ

Danh mục

How can i fix my CSS so that width accounts for both padding and border?