@media screen and (max-width: 600px) {
    .cosmosfarm-members-form {
        padding: 0 10px;
    }

   }
 

알려주신 내용을 입력하였으나 안되었습니다.

.cosmosfarm-members-form { padding: 0 10px !important; }

아래의 기존 코드를 지우고 

@media screen and (max-width: 600px) {
    .cosmosfarm-members-form {
        padding: 0 10px;
    }

   }

알려주신 아래 코드를 넣었으나 안되었습니다 ㅜㅜ
.cosmosfarm-members-form { padding: 0 10px !important; }

이러한 디자인 문제를 저만 문의하는건가요?

아래 코드를 입력해보시겠어요?

.cosmosfarm-members-form { padding: 0 10px !important; }

고맙습니다.

그런데 모바일 화면에서 의도대로 좌우여백이 생기지 않습니다.
바뀐게 없네요.

CSS 하단의 padding: 0 10px;에서 10px을 숫자증가시켜도 그대로입니다.
확인좀 다시 부탁드립니다.

추가하신 코드 위에 } 를 입력해보시겠어요?

고맙습니다.

수정하였으나 1개의 오류가 있다고 합니다.
아래 링크 확인 부탁드립니다.

https://imgur.com/a/PpfOnKT

감사합니다.

테마 추가 css에 아래의 코드를 입력해보시겠어요? 

@media screen and (max-width: 600px) {
    .cosmosfarm-members-form {
        padding: 0 10px;
    }
}

고맙습니다.

해당 클래스를 감싸고 있는 요소에 padding값을 주시면 됩니다.

일단 소스를 보니.... 모든 페이지에 동일한 요소들이 없는걸로 봐서는 가장 안전하게

#post-46{padding:20px;}를 그냥 주기만 해도 괜찮을 듯 싶습니다.

생각같아서는 코스모스팜 플러그인을 직접 수정
/wp-content/plugins/cosmosfarm-members/skin/two/style.css을 하시는 것도 좋겠지만...
이건 어디까지 업데이트되면 도루묵이니...

사용자정의하기>추가CSS에 #post-46값만 넣어주셔도 괜찮을 듯 싶습니다.