1

I have a element that I am trying to center using 

margin = 0 auto;

Yet, the margin will not show up when I inspect the page in the browser. Any suggestions of how I could fix this problem? 

    #main{
     margin: 0 auto;
     width: 100%;
    }
    <div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
    </div>
Iłya Bursov
  • 23,342
  • 4
  • 33
  • 57
ddjh5
  • 67
  • 1
  • 7

2 Answers2

1

You are trying to center a div with 100% width with margins. The problem is there is no space for margins when the div takes up the entire width.

With a narrower div, you'll see the centering take effect.

#main{
     margin: 0 auto;
     width: 70%;
     border: 1px solid black;
     padding: 10px;
}
<div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
    </div>

However, a more robust way of centering is flexbox

#main{
  display: flex;
  flex-flow: column;
  align-items: center;
}
<div id="main">
      <div id="heading">
        <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
        <button class="head head2 font" href="" id="hb1">Guitar</button>
        <button class="head head2 font" href="" id="hb2">Bass</button>
        <button class="head head2 font" href="" id="hb3">Piano</button>
        <button class="head head2 font" href="" id="hb4">Drums</button>
        <i class="fa fa-bars menu"></i>
      </div>
      <br>
      <div id="div-mi1">
        <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
        <h2 id="mt1" class="font">Test</h2>
      </div>
</div>
Chava Geldzahler
  • 3,605
  • 1
  • 18
  • 32
1

If centering the div and its child elements is the only thing you're after, try adding text-align: center;to #main { ... }

#main{
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
<div id="main">
  <div id="heading">
    <img class="head" id="mainImg" src="Images/logo.png" alt="Know Music">
    <button class="head head2 font" href="" id="hb1">Guitar</button>
    <button class="head head2 font" href="" id="hb2">Bass</button>
    <button class="head head2 font" href="" id="hb3">Piano</button>
    <button class="head head2 font" href="" id="hb4">Drums</button>
    <i class="fa fa-bars menu"></i>
  </div>
  <div id="div-mi1">
    <img id="mi1" alt="Eletric Guitar" src="Images/guitarplaying.jpg">
    <h2 id="mt1" class="font">Test</h2>
  </div>
</div>
terryeah
  • 583
  • 5
  • 17