can not reduce zurb foundation form input width - reactjs

Question

I am new to Zurb Foundation, and using it in my React 16 project. And just not been able to reduce the width of the form-input and button within a component named CountdownForm.jsx. These two elements (form-input and button) are taking the entire width of the page. And I would like to keep them centred and 30% width.
Would highly appreciate any help.
I have the following code in my Main.jsx
var Main = (props) => {
return (
<div>
<Navigation/>
<div className="row">
<div className="column small-centered medium-6 large-4">
{props.children}
</div>
</div>
</div>
);
};
module.exports = Main;
And then in my child component named CountdownForm.jsx I have written as below
render: function () {
return (
<div>
<form ref="form" onSubmit={this.onSubmit} className="countdown-form">
<input type="text" ref="seconds" placeholder="Enter time in seconds"/>
<button className="button expanded">Start</button>
</form>
</div>
);
}
});
module.exports = CountdownForm;
I also have a file named _countdownForm.scss for styling the form and I have included the below in this file
.countdown-form {
width: 30%;
justify-content: center;
}
the width of the form-input was supposed to be set by foundation's grid system which I am defining in my Main.jsx (the below part)
<div className="row">
<div className="column small-centered medium-6 large-4">
{props.children}
</div>
I am using "foundation-sites": "6.4.4-rc1" and "react": "^16.0.0". The github of the project https://github.com/rohan-paul/ReactCountdownTimer

Answer 1

Never Mind.. Got it resolved..
I had to adjust the Countdown.jsx component to fix this, not the Main.jsx” ( and .coutdownForm CSS class defined in _countdownForm.scss had no impact at this point of the app in resolving this issue, as the centering of form-input was handled in the render section of the component Countdown.jsx )
So, I just changed Countdown.jsx as follows:
FROM
else {
return <CountdownForm onSetCountdown={this.handleSetCountdown}/>;
}
TO
else {
return (
<div className="grid-container">
<div className="cell small-centered medium-6 large-4">
<CountdownForm onSetCountdown={this.handleSetCountdown} />
</div>
</div>
);
https://github.com/rohan-paul/ReactCountdownTimer/blob/master/app/components/Countdown.jsx