A basic question regarding blocks

HTML & CSS
1

In the Frontend Path / Web dev basics / Centering our content, I was wondering why we can’t apply this “margin-right and margin-left” to the .main?

 .main {
    
    margin-top: 100px;   
}

.logo-img {
    display: block;
    width: 300px;
    margin-bottom: 20px;
    margin-right: auto; 
    margin-left: auto;
}

.search-input {
    display: block;
    width: 400px;
    margin-right: auto; 
    margin-left: auto;
}
2

Hey @bilge,

The reason we don’t apply that same rule to .main is because of how CSS handles centering with auto margins.

margin-left: auto;
margin-right: auto;

for the above to work:

  1. The element must be a block-level element (or set to display: block).
  2. It must have a specific width (not just auto or 100%).

In your case, .logo-img and .search-input meet both conditions—they’re block-level and have fixed widths (300px and 400px respectively). So the browser knows how much space is left on the sides and can divide it evenly to center them.

For .main, even if you applied margin-left: auto; margin-right: auto;, it wouldn’t do anything, because .main likely spans the full width of the page. There’s no “leftover space” to auto-distribute, and we’re not trying to center .main itself—we’re trying to center its contents.

If you want to center everything inside .main more efficiently , I would use Flexbox:

.main {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

This way, you don’t need to center each child manually as they’ll all be centered automatically. Hope that helps!