huge right margin html/css

Question

I am trying to build my first website. I am wondering why I got a huge right margin when I set that value 0 everywhere.

This is my HTML code:

<!DOCTYPE html>
<html>
  <head>
    .........
  </head>
  <body>
    <header>
      <div class="container">
         <div id="branding">
          <h1>AUTO SERVICE</h1>
          <h2>zoo</h2>
        </div>
      </div>
    </header>
  </body>
</html>

the CSS code:

body {
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
  background-color:#f4f4f4;
}

/ Global /

.container {
  width: 80%;
  margin-left: 20px;
  margin-right: 0px;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

/ Header /

header{
  background: #03244D;
  color: #9AA7B7;
  padding-top: 10px;
  min-height: 70px;
  line-height: 0.5;
}

/ Branding /

header #branding{
    font: 25px/0.8 "Times New Roman", Georgia, Serif;
    font-size: 160%;
    text-align: center;
    float: center;
}

I'd be grateful for any suggestions.

Answer 1

Your container is set to only be 80% width. The remaining 20%, minus 20 pixels for the left-margin, will likely be your margin on the right-hand side. Try changing the width of your container in your CSS, and see if that helps.

huge right margin html/css

Question

1 answers

solution1
0 ACCPTED 2018-01-03 20:12:19

huge right margin html/css

Question

1 answers

solution1 0 ACCPTED 2018-01-03 20:12:19

solution1
0 ACCPTED 2018-01-03 20:12:19