Hey there, I'm having some trouble figuring out how to center my page using flexbox within styled components in a Next.js app. Any suggestions or tips?
Let me share with you my Blog Component
import ReactMarkdown from 'react-markdown'
import BlogPostStyles from './styles/BlogPostStyles';
const BlogComponent = ({ data: { post: { fields: { title, body } } } }) => {
return (
<BlogPostStyles>
<article>
<ReactMarkdown>{body}</ReactMarkdown>
</article>
</BlogPostStyles>
);
};
export default BlogComponent;
And here is my BlogStyles Component
import styled from 'styled-components';
const BlogPostStyles = styled.div`
max-width: 1200px;
display: flex;
justify-content: center;
`;
export default BlogPostStyles;