cosmosfarm-members-form 클래스가 100%로 무조건되게끔 되어서인데...

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

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

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

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

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

알려주신 내용을 추가CSS에 넣었으나 아래 링크의 그림과 같이 오류사항이 있다고 합니다.
제가 코딩을 잘 몰라서요
수정사항 알려주시면 감사하겠습니다.
https://imgur.com/a/jiH4sW1

안녕하세요~^^

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

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

고맙습니다.

안녕하세요

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

https://imgur.com/a/PpfOnKT

감사합니다.

처음 선언된 @media 부분을 닫아주셔야 합니다.

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

고맙습니다.

덕분에 수정은 완료했습니다.
아래 이미지와 같습니다.
https://imgur.com/a/GxwVqjK

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

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

@media 부분을 제외하고

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

.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; }

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