How do I rewrite
margin: 15px calc(-100vw / 2 + 1009px / 2); // 1024px -15px padding
Now I have to write all my media queries and specify exact width, minus 15px (in my case) to get it working.
Instead of 1009px / 2
can I use another calc()
here, like (calc(100vw - 15px)) / 2
?
Nested calc
is fine, but note that is not supported in IE11. Also, you need to maintain the spacing convention:
p {
padding: calc(calc(5px + 5px) + calc(5px + 5px));
border: 1px solid black;
}
<p>Hello! I have a padding of 20px!</p>