container wont display padding

Question

My .container won't display padding. I have tried multiple methods and it won't pad.

CSS:

nav{
    border-style: solid;
    border-color: green;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    height: 70vh;
}

ul{
    padding:0px;
    list-style-type:none;
}

.container{
    border-top: solid;
    border-right: solid;
    border-bottom: solid;
    border-color: green;
    padding-left: 10px;
    width: 97vw;
    height: 70vh;
}

HTML:

<article>
<nav>
<ul style="list-style-type:none;">
<li><strike>home</strike></li>
<li><a href="portfolio.php">portfolio</a></li>
<li><a href="portfolio.php">dsdfsdfs</a></li>
</ul>
</nav>
<div class="container"></div>
</article>

No matter what value I set the padding-left to, the padding always remains the same.

your padding works but it is pad from the article. SO you have to place your div position correctly. — Murad Hasan, Mar 10 '16 at 03:23
Your padding is OK, please let me know what do you want the result to be an I will help you — Lester Vargas, Mar 10 '16 at 03:24
I'm looking to achive a nav that's joined to the container, and that the container doesn't wrap beneath the nav — Adam, Mar 10 '16 at 23:23

score 0 · Answer 1 · answered Mar 10 '16 at 03:29

Fiddle link

Updated CSS:

nav{
    border-style: solid;
    border-color: green;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    display: inline-block;
    height: 70vh;
}

ul{
    padding:0px;
    list-style-type:none;
}

.container{
    border-top: solid;
    border-right: solid;
    border-bottom: solid;
    border-color: green;
    padding-left: 10px;
    width: 75vw;
    height: 70vh;
    display: inline-block;
    float: left;
    margin: 0px;
}

container wont display padding

1 Answers1