[Theme – 2013] : Issue with archive header

I made few modifications to category.php file in 2013 theme .

I also edited the css for the following properties .archive-header and .archive-title .

The problem i am facing is that when i changed margin: 0 auto; to margin: 0 314px; , the archive title became non-responsive . How can i make the below modification and still make it responsive?

style.css

.archive-header {
        padding-top: 45px;
    }

    .archive-title,
    .archive-meta {
    	background-color: #e8e5ce;
    	font: 300 italic 30px "Source Sans Pro", Helvetica, sans-serif;
    	margin: 0 314px;
    	max-width: 600px;
    	padding: 30px 0;
    	width: 100%;
    	position: relative;
    }

Category.php

<div id="primary" class="content-area">
	<div id="content" class="site-content" role="main">
	<?php if ( have_posts() ) : ?>
		<header class="archive-header">
		</header><!-- .archive-header -->
			<h2 class="archive-title"><?php printf( __( '%s', 'twentythirteen' ), single_cat_title( '', false ) ); ?></h2>
			<?php if ( category_description() ) : // Show an optional category description ?>
			<div class="archive-meta"><?php echo category_description(); ?></div>
			<?php endif; ?>

		<?php /* The loop */ ?>
		<?php while ( have_posts() ) : the_post(); ?>
			<?php get_template_part( 'content', get_post_format() ); ?>
		<?php endwhile; ?>

		<?php twentythirteen_paging_nav(); ?>

	<?php else : ?>
		<?php get_template_part( 'content', 'none' ); ?>
	<?php endif; ?>

	</div><!-- #content -->
</div><!-- #primary -->

I want the archive to appear right on top of the content in the page like below image , thats why i have added margin 0 , 314px

![enter image description here][1]

If margin right is not given it appears as following

![enter image description here][2]

[1]: http://i.stack.imgur.com/YiRuv.png
[2]: http://i.stack.imgur.com/TDI9e.png