-1

Any help or hint would be greatly appreciated it.

https://codepen.io/jadeite1000/pen/YzrmJRg

Not sure why my page is center. I don't want it to be center. I just want it to be left align.

                <body>
                <!--
                <h1>The Basic Language of the Web: HTML</h1>
                <h2>The Basic Language of the Web: HTML</h2>
                <h3>The Basic Language of the Web: HTML</h3>
                <h4>The Basic Language of the Web: HTML</h4>
                <h5>The Basic Language of the Web: HTML</h5>
                <h6>The Basic Language of the Web: HTML</h6>
                -->
                <div class="container">
                  <header class="main-header">
                <h1> The Code Magazine</h1>

                <nav>
                  <!-- <strong>This is the navigation</strong> -->
                  <a href="blog.html">Blog</a>
                  <a href="#">Challenges</a>
                  <a href="#">Flexbox</a>
                  <a href="#">CSS Grid</a>
                </nav>

enter image description here

jadeite1000
  • 621
  • 2
  • 11
  • 27

2 Answers2

3

It's center-aligned because of container class

auto: The browser selects a suitable margin to use. For example, in certain cases, this value can be used to center an element.

check this: https://developer.mozilla.org/en-US/docs/Web/CSS/margin#values

.container {
  width: 800px;
  /* margin: 0 auto; */  // remove margin auto
}
Rahul Sharma
  • 9,534
  • 1
  • 15
  • 37
1

In container ruleset you have added margin: 0 auto; which means margin-top:0, margin-bottom:0, margin-left:auto, margin-right:auto.

due to this margin, the ui came to the center.

Try removing margin: 0 auto; in container ruleset.

nagendra nag
  • 1,142
  • 2
  • 15