Archived topic
Custom CSS box not full width
4 replies · Started by Rachel on April 23, 2020
Viewing posts 1–5 of 5
Hi, I have added some custom css to create a highlight box to add to some paragraph blocks in my blog posts.
However even when I left align the content in the paragraph, the box is not the full width of the container - it is indented on the left.
Is there are a way for the css to be left aligned and run the full width of the block?
Here is the css:
.my-related-box {
background-color: #f8f8f8;
padding: 1em;
margin: 1em;
border-left: 5px solid #ff3366;
max-width: 100%
}
Thanks,
Rachel
Hi there,
try this CSS:
.my-related-box {
background-color: #f8f8f8;
padding: 1em;
margin: 1em 0;
border-left: 5px solid #ff3366;
max-width: 100%;
width: 100%;
box-sizing: border-box;
}Perfect, that works. Thanks for the help - that is a handy piece of code to know :)
You're welcome
Closing
This archived topic is closed to new replies.
