React Text Too Big

Question

I'm following Brad Traversy's Udemy tutorial currently. I am currently following along on working on this page: https://github.com/bradtraversy/devconnector_2.0/blob/master/client/src/components/posts/PostItem.js

For some reason, the text for the name and the body on my page "Posts" is showing up way bigger than it should. I compared it to my other page, "Developers", in which I used similar code, and it shows up as normal. I don't understand what I did differently. Below, I have attached my code for both pages, my CSS for the posts, and pictures of each page.

Please let me know if you need more information, or if anything I have typed is unclear.

Thank you so much in advance.

MY-1 CSS

/* Margin */
.m {
  margin: 0.5rem;
}
.m-1 {
  margin: 1rem;
}
.m-2 {
  margin: 2rem;
}
.m-3 {
  margin: 3rem;
}
.my {
  margin: 0.5rem 0;
}
.my-1 {
  margin: 1rem 0;
}
.my-2 {
  margin: 2rem 0;
}
.my-3 {
  margin: 3rem 0;
}

POSTS PAGE CSS

/* Posts Page */
.post-form .post-form-header {
  background: var(--primary-color);
  padding: 0.5rem;
}

.post {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 2rem;
  align-items: center;
}

.post > div:first-child {
  text-align: center;
}

.post img {
  width: 100px;
}

.post .comment-count {
  background: var(--light-color);
  color: var(--primary-color);
  padding: 0.1rem 0.2rem;
  border-radius: 5px;
  font-size: 0.8rem;
}

.post .post-date {
  color: #aaa;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}

POSTS PAGE CODE

import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Moment from 'react-moment';
import { connect } from 'react-redux';
import authReducer from '../../reducers/auth';

const PostItem = ({
  auth,
  post: { _id, text, name, avatar, user, likes, comments, date },
}) => (
  <div className='post bg-white p-1 my-1'>
    <div>
      <Link to={'/profile/' + user}>
        <img className='round-img' src={avatar} alt='' />
      </Link>
      <a href='profile.html'>
        <h4>{name}</h4>
      </a>
    </div>
    <div>
      <p className='my-1'>{text}</p>
      <p className='post-date'>
        Posted on <Moment format='YYYY/MM/DD'>{date}</Moment>
      </p>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-up'></i>
        <span> {likes.length > 0 && <span>{comments.length}</span>}</span>
      </button>
      <button type='button' className='btn btn-light'>
        <i className='fas fa-thumbs-down'></i>
      </button>
      <Link to={'/post/' + _id} className='btn btn-primary'>
        Discussion{' '}
        {comments.length > 0 && (
          <span className='comment-count'>{comments.length}</span>
        )}
      </Link>
      {!auth.loading && user === auth.user._id && (
        <button type='button' className='btn btn-danger'>
          <i className='fas fa-times'></i>
        </button>
      )}
    </div>
  </div>
);

PostItem.propTypes = {
  post: PropTypes.object.isRequired,
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, {})(PostItem);

DEVELOPERS PAGE CODE

import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

const ProfileItem = ({
  profile: {
    user: { _id, name, avatar },
    status,
    company,
    location,
    skills,
  },
}) => {
  return (
    <div className='profile bg-light'>
      <img src={avatar} alt='' className='round-img' />
      <div>
        <h2>{name}</h2>
        <p>
          {status} {company && <span> at {company}</span>}
        </p>
        <p className='my-q'>{location && <span>{location}</span>}</p>
        <Link to={`/profile/${_id}`} className='btn btn-primary'>
          View Profile
        </Link>
      </div>
      <ul>
        {skills.slice(0, 4).map((skill, index) => (
          <li key={index} className='text-primary'>
            <i className='fas fa-check'></i>
            {skill}
          </li>
        ))}
      </ul>
    </div>
  );
};

ProfileItem.propTypes = {
  profile: PropTypes.object.isRequired,
};

export default ProfileItem;

POSTS PAGE IMAGE

DEVELOPERS PAGE IMAGE

STYLES APPLIED TO BODY

Answer 1

The text size on your 'Posts' page is being defined by the class my-1, here:

  <p className='my-1'>{text}</p>

You haven't shared the CSS for that class, whether it's your own defined styling or something imported from a 3rd party, but that's the source of the problem.

You could either remove that class from this <p> element, or use the same my-q class that you've applied on the text in your 'Developers' page.