CSS margin and width

1 
.container {
    width: 1140px;
    margin: 20px auto 0 auto;
}

I created this class and used it as a container for my page. However, the margin property only works when I used the width property. Can anybody tell me what’s wrong?

2

Could you post the HTML as well? Seems like the width is allowing the margin to have room to be the settings you have put it at.

3 
<!DOCTYPE html>

<html>
    
    <head>
        <title>My first blog post</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        
    </head>
    
    <body>
        
        <div class="container">
            <div class="blog-post">
            
                <h1>My first blog post</h1>
                <h2>This is my first blog post</h2>
                <p class="main-text">


                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
                </p>

                <a href="http://www.udemy.com" target="_blank">Link to Udemy</a>

                <a href="logo.jpg" target="_blank">HTML logo</a>
    
                <h2>HTML is amazing</h2>
                <p class="main-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,

                </p>
                <img src="logo.jpg" alt="The HTML5 logo">
                
            </div>
            
            <div class="other-post">
                <div class="other">
                    The first other blog post 
                </div>
                
                
                <div class="other">
                    Yet another blog post
                </div>
                
                
                <div class="other">
                    The best post ever: read this!
                </div>
            </div>
               
            
            <div class="clearfix"></div>
            
            
            <div class="author-box">
                <img src="author.jpg" alt="Author photo">
                <p class="author-text">Feliz Navidad</p>
            </div>
        </div>
        
    
    </body>

</html>
4

All divs are default blocks that take up 100% of it’s parent.
So your container is taking up 100% of it’s parent, your body.

So if the div is 100%, you wont see the auto margins kick in at all.

Does that make sense?

1 Like