Margin-right On Css Not Working

I have been messing with Coding during school because it interests me the most out of anything at school, and have been self-teaching myself Html-Css-and Js for most of the school

Solution 1:

Change:

Margin-Right: 100x;

to:

margin-right: 100px;

Solution 2:

The problem is the width:100% on the .Isaac divs. This causes the divs themselves to be as wide as their parent, the body. Then the margins extend to the right of that, off screen.

Answer : remove the width:100%.

.Isaac {
      /*width: 100%;*/padding: 4px;
      Margin-Right: 100px;
      background-color: white;
      -webkit-box-shadow: 0px0px24pxrgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0px2px12pxrgba(23, 69, 88, .5);
      -webkit-border-radius: 100px;
      -moz-border-radius: 100px;
      border-radius: 10px;
    }

    .myButton {
      -moz-box-shadow: inset 0px5px0px0px#000000;
      -webkit-box-shadow: inset 0px5px0px0px#000000;
      box-shadow: inset 0px1px0px0px#000000;
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -webkit-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -o-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -ms-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: linear-gradient(to bottom, #ffffff5%, #ffffff100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
      -moz-border-radius: 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px;
      border: 1px solid #000000;
      display: inline-block;
      cursor: pointer;
      color: #000000;
      font-family: Arial;
      font-size: 13px;
      padding: 6px24px;
      text-decoration: none;
      text-shadow: 0px1px0px#000000;
    }
    
    .myButton:hover {
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff));
      background: -moz-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -webkit-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -o-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: -ms-linear-gradient(top, #ffffff5%, #ffffff100%);
      background: linear-gradient(to bottom, #ffffff5%, #ffffff100%);
      filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
      background-color: #ffffff;
    }
    
    .myButton:active {
      position: relative;
      top: 1px;
    }

/* I added this, because the body start tag doesn't appear in the snippet */body {
  background-attachment: fixed; background-repeat: no-repeat; Background-size: 100%100%; background-image:url(https://upload.wikimedia.org/wikipedia/commons/3/32/Mount_Rainier_from_above_Myrtle_Falls_in_August.JPG)
    }

<divclass="Isaac"Style="Background-color: #E6E6E6;  Margin-Top: 40px"><imgsrc="http://www.conway.k12.wa.us/sites/default/files/logov4.png"style="width:150px;height:50px;"><ahref="#"class="Hello">Menu</a> : <ahref="#"class="Hello">Family access</a> : <ahref="#"class="Hello"> Facebook/Social Media<a/> : <ahref="#"class="Hello"><br><ahref="#"class="MyButton">District Office</a><ahref="#"class="myButton">School Office</a><ahref="#"class="myButton">Departments</a><ahref="#"class="myButton">Staff</a><ahref="#"class="myButton">Family</a><ahref="#"class="myButton">Teachers</a><ahref="#"class="myButton">Board</a></div>

Solution 3:

use text-align center for aligning your contents to center

• issue with margin-right was you use : x instead of px

  .Isaac { width: 100%; padding: 4px; text-align: center; margin-right: 100px; background-color: white; -webkit-box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 2px 12px rgba(23, 69, 88, .5); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 10px; }

Hope this is what you want to achieve