As a budding web developer, I'm encountering a basic issue that has me scratching my head. Any assistance would be highly appreciated:
Regardless of the width I specify for elements within a particular div container, both Safari and Chrome seem to automatically add extra margins that extend to fill the entire width of the div. Even if I try to set the margins to 0, the CSS gets overridden. Take this snippet for example:
<div class="container">
<div class="element1">
...
</div>
</div>
And here's the corresponding CSS:
.container{
background-color:#ffffff;
margin-left:7.5%;
margin-right:7.5%;
padding:30px;
color:#505050;
line-height:1.5;
font-size:14px;
}
.element1{
max-width:50%;
margin: 0px 0px 0px 0px;
}
Even though element1 is supposed to have a width of 50% within its container, it seems to have an additional margin on the right that fills up the remaining space. Why is this happening and how can I ensure that the right margin is actually set to 0?
Your help is greatly appreciated!