Margin-Right на css не работает

Question

Я возился с кодированием во время школы, потому что он больше всего меня интересует в школе, и я сам учил себя Html-Css-и Js в течение большей части учебного года.

Я воссоздал сайт своей школы, и у меня возникли некоторые проблемы.

Моя команда «Без полей» справа не работает. Я пытался центрировать область <Div> с помощью CSS и команду «Стиль» с использованием поля слева и справа, а право никогда не будет работать.
Я не хочу просто использовать команду position: absolute;, потому что я хочу немного места на стороне, чтобы вы могли видеть фон.
Вот мой код на Html.

CSS:

.Isaac { 
     width: 100%; 
     padding: 4px; 
     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; 
    } 

HTML:

<div class="Isaac" Style="Background-color: #E6E6E6 ; Margin-Top: 40px"> 
     <!-- div content --> 
    </div> 

Edit: "100x" вещь была просто глупая ошибка с моей стороны, я имел в виду, чтобы иметь "100px"
Кроме того, я изменено Margin-Right: 100x; margin-right: 100px; и до сих пор нет никакой разницы
Я надеюсь, что вы можете мне помочь

Answer 1

Проблема заключается в width:100% на .Isaac дивы. Это приводит к тому, что сами дивы должны быть такими же широкими, как и их родитель, тело. Затем поля простираются справа от него, за пределами экрана.

Решение: удалить width:100%.

 
 
    .Isaac { 
 
     /*width: 100%;*/ 
 
     padding: 4px; 
 
     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; 
 
    } 
 

 
    .myButton { 
 
     -moz-box-shadow: inset 0px 5px 0px 0px #000000; 
 
     -webkit-box-shadow: inset 0px 5px 0px 0px #000000; 
 
     box-shadow: inset 0px 1px 0px 0px #000000; 
 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #ffffff)); 
 
     background: -moz-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); 
 
     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: 6px 24px; 
 
     text-decoration: none; 
 
     text-shadow: 0px 1px 0px #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, #ffffff 5%, #ffffff 100%); 
 
     background: -webkit-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: -o-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: -ms-linear-gradient(top, #ffffff 5%, #ffffff 100%); 
 
     background: linear-gradient(to bottom, #ffffff 5%, #ffffff 100%); 
 
     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) 
 
    }

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

Answer 2

Изменения:

Margin-Right: 100x; 

к:

margin-right: 100px; 

Answer 3

использованию текста выравнивание по центру для выравнивания вашего содержания к центру

• выпуск с margin-right был вы используете: x вместо px

  .Isaac { ширина: 100%; прокладка: 4шт; 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; }

Надежда это то, что вы хотите достичь